点击房间下方弹出房间详情页

html

 <!-- 房间详情 -->
    <div class="mask hide"></div>
    <div class="roomDetail hide">
        <div class="head">
            <h3>大床房</h3>
            <i class="fa fa-times" id="close"></i>
        </div>
        <!-- 轮播 -->
        <div class="swiper-container1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../img/0.png" alt="">
                </div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
        </div>
        <!-- 设施 -->
        <ul class="facility">
            <li>早餐 <span>免费早餐</span></li>
            <li>可住 <span>2人</span></li>
            <li>早餐 <span>免费早餐</span></li>
            <li>可住 <span>2人</span></li>
            <li>早餐 <span>免费早餐</span></li>
            <li>可住 <span>2人</span></li>
            <li>早餐 <span>免费早餐</span></li>
            <li>可住 <span>2人</span></li>
            <li>早餐 <span>免费早餐</span></li>
            <li>可住 <span>2人</span></li>
        </ul>
        <div class="rules">
            <h3>使用规则</h3>
            <div class="con">
                dfsangefswer;bogrvujisj教学司登记收费金额org坚实的日国内二分局俄日过几天日
            </div>
        </div>
        <div class="footer">
            <div class="price">￥666.66</div>
            <div class="submit">预订</div>
        </div>
    </div>

css

.mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    position: fixed;    //固定定位
    left: 0;
    top: 0;
    right: 0;
    z-index: 99;
}

.roomDetail {
    position: fixed;   //固定定位
    left: 0;
    bottom: 0;
    background-color: #fff;
    height: 8rem;
    overflow: auto;
    z-index: 9999;
    width: 100%;
    .head {
        height: 0.8rem; // border-bottom: 0.01rem solid#ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.25rem;
        h3 {
            font-weight: normal;
            font-size: 0.28rem;
        }
    }
    .swiper-container1 {
        overflow: hidden;
        width: 100%;
        height: 4rem;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .facility {
        margin: 0.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        border-bottom: 0.01rem solid rgb(199, 198, 198);
        li {
            width: 50%;
            color: rgb(99, 99, 99);
            font-size: 0.24rem;
            span {
                color: #000;
                margin-left: 0.1rem;
            }
        }
    }
    .rules {
        padding: 0 0.25rem;
        h3 {
            font-size: 0.28rem;
        }
    }
    .footer {
        width: 100%;
        height: 0.8rem;
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        display: flex;
        align-items: center;
        z-index: 999;
        .price {
            width: 50%;
            color: rgba(96, 59, 231, 1);
            font-size: 0.34rem;
            font-weight: 700;
            text-align: left;
            height: 100%;
            line-height: 0.8rem;
            border-top: 0.01rem solid rgb(238, 238, 238);
            padding-left: 0.5rem;
            box-sizing: border-box;
            background-color: #fff;
        }
        .submit {
            height: 100%;
            flex: 1;
            text-align: center;
            background: linear-gradient(121deg, rgba(179, 47, 228, 1), rgba(96, 59, 231, 1));
            color: #fff;
            font-size: 0.26rem;
            line-height: 0.8rem;
        }
    }
}

js

  // 点击房间，跳出房间详情
                $('.roomitem').click(function(e) {
                    // 请求房间详情接口渲染页面
                    
                    $('.mask').show();
                    // 让body定位为负的屏幕滚动出去的距离e.pageY-e.clientY
                    $('body').css({ 'position': 'fixed', 'top': `-${e.pageY-e.clientY}px`, 'left': '0px', 'right': '0px' });
                    $('.roomDetail').slideDown(function() {      // 从下往上滑出是slideDown（1000，回调函数）
                        $('#close').click(() => {
                            $(this).slideUp();
                            $('.mask').hide()
                            $('body').css('position', '')
                            $(window).scrollTop(`${e.pageY-e.clientY}`)     // 让页面保持在原来位置
                        })
                        $('.mask').click(() => {
                            $(this).slideUp();
                            $('.mask').hide()
                            $('body').css('position', '')
                            $(window).scrollTop(`${e.pageY-e.clientY}`)
                        })
                    });
                });

$(’.hotelDetail’).click(function(e) {
// console.log(e);
// console.log(‘e.clientY:’ + e.clientY); 距离屏幕顶部高度
// console.log(‘e.offsetY:’ + e.offsetY); 距离文档顶部高度
// console.log(‘e.pageY:’ + e.pageY); 距离页面顶部高度
// })

offsetY=pageY
e.pageY-clientY=滚动出去的距离=$(window).scrollTop（）