酒店类型选择tab栏 第二版 手机没问题

页面

功能

页面向上滚动吸顶
点击直接吸顶，并可以tab切换，遮罩弹出，禁止页面滑动
选择之后或者点击遮罩，回复正常、

html

 <!-- 条件筛选 -->
        <div class="mask hide">
            <div class="collapseBox">
                <ul class="collapse">
                    <li>全部</li>
                    <li>管城区</li>
                    <li>二七区</li>
                    <li>金水区</li>
                    <li>高新区</li>
                    <li>郑东新区</li>
                    <li>管城区</li>
                    <li>二七区</li>
                    <li>金水区</li>
                    <li>高新区</li>
                    <li>郑东新区</li>
                </ul>
                <ul class="collapse">
                    <li>0-100</li>
                    <li>101-200</li>
                    <li>201-300</li>
                    <li>301-400</li>
                    <li>401-500</li>
                </ul>
                <ul class="collapse">
                    <li>距离优先</li>
                    <li>好评优先</li>
                    <li>低价优先</li>
                    <li>人气优先</li>
                    <li>高价优先</li>
                </ul>
                <ul class="collapse">
                    <li>酒店类型</li>
                    <li>房间类型</li>
                    <li>服务设施</li>
                </ul>
            </div>
        </div>
        <div class="select">
            <!-- 头部 -->
            <ul class="filter">
                <li>区域</li>
                <li>价格</li>
                <li>智能排序</li>
                <li>筛选</li>
            </ul>
        </div>

css

 // 条件筛选
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%; // height: 100%;
        background-color: rgba(0, 0, 0, .4); // z-index: 100;
        overflow-y: hidden;
        z-index: 22;
        .collapseBox {
            position: absolute;
            left: 0;
            top: 2.1rem;
            z-index: 999;
            width: 100%;
            overflow-x: hidden;
        }
        .collapse {
            z-index: 1001;
            background-color: white;
            width: 100%;
            height: 4.7rem;
            display: none;
            padding: 0 0.3rem;
            font-size: 0.22rem;
            overflow: auto;
        }
        .collapse>li {
            padding: 0.2rem 0;
            border-bottom: 0.01rem solid rgba(234, 234, 234, 1);
        }
    }
    .select {
        z-index: 9999;
    }
    .filter {
        z-index: 9999;
        height: 1rem;
        padding: 0 0.65rem 0 0.4rem;
        line-height: 1rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.24rem;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        background-color: #fff; // z-index: 999;
        li {
            position: relative;
            &::after {
                content: '';
                width: 0.14rem;
                height: 0.08rem;
                position: absolute;
                right: -0.32rem;
                top: 0.45rem;
                background: url(../img/down-arrow.png);
                background-size: contain;
            }
        }
    }

js

 // 条件筛选tab栏切换
    var tabbarTop = getTabbarHeight() || 0;

    var top = $('.filter').offset().top;

    console.log(top);

    $('.filter>li').click(function() {
        // 点击的时候让整个下边移动到顶部，并且固定
        // 思路设置window的滚动距离等于盒子距离上部的距离
        // $(window).scrollTop(top);
        $('.mask').show().height($(window).height());
        $('.filter').css({ 'position': 'fixed', 'top': `${tabbarTop}px`, 'left': '0', 'right': '0' });

        $('.barhead').show().height(`${tabbarTop}px`);
        $('.barhead h1').css('line-height', '74px');

        // tab栏切换
        var i = $(this).index(); //获取当前点击的索引
        $('.collapse').eq(i).toggle().siblings().hide();


        // 判断点击的tab的盒子是否隐藏，如果是隐藏状态，可以上下滚动，
        // 若是显示状态，则禁止屏幕滚动
        // bug：这个是jQuery的方法

        if ($(".collapse").eq(i).is(':hidden')) { //.is(':visible')显示
            // $('html,body').removeClass('overHidden'); //使网页不可滚动
            // $("body").parent().css("overflow-y", "auto");
            $('.mask').hide()
            $('.filter').css({ 'position': '' })
            $('body').css({ 'position': '' })
            $(window).scrollTop(top);
            $('.barhead').hide()
        } else {
            console.log(222222222);
            console.log(top);
            $('body').css({ 'position': 'fixed', 'top': `-${top}px`, 'left': '0', 'right': '0' });
            $('.mask').on('touchmove', function(e) {
                e.stopPropagation();
            })
            $('.mask').click(function() {
                // $('html,body').removeClass('overHidden'); //使网页不可滚动
                // $("body").parent().css("overflow-y", "auto");
                $('.mask').hide();
                $('.filter').css({ 'position': '' });
                $('body').css({ 'position': '' });
                $(window).scrollTop(top);
                $('.barhead').hide()
            })
        }
    })

    // 将用户选中的条件渲染到上边
    $('.collapse>li').click(function(e) {
        $(window).scrollTop(top);
        $('.barhead').hide()
        e.stopPropagation();
        var text = $(this).text();
        var i = $(this).parent().index();
        $('.filter>li').eq(i).text(text);
        $(this).parent().hide();
        // $('html,body').removeClass('overHidden'); //使网页不可滚动
        // $("body").parent().css("overflow-y", "auto");
        $('.mask').hide()
        $('.filter').css({ 'position': '' })
        $('body').css({ 'position': '' })
    })

    // 页面滚动到筛选部分，筛选固定
    $(window).scroll(function() {
        if ($(window).scrollTop() >= top) {
            $('.select').css({ 'position': 'fixed', 'top': `${tabbarTop}px`, 'left': '0', 'right': '0' });
        } else {
            $('.select').css({ 'position': '', 'top': '0' })
        }
    })