h5移动端滑动内容置顶-蒲公英云

h5移动端滑动内容置顶

心已赠人 2024-04-17 16:29 157阅读 0赞

就想很多导航栏一样，这次是一个列表类型的滑动置顶需求，首先引入jquery，然后进行操作。

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

html代码：

<div class="contentOuter">
    <div class="tabTitle">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in tabLists" @click="changeType(index)">
                    <img :src="item.imgSrc" >
                    <p :class="{fontItem:index== i}" >{
   {item.name}}</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

js代码：

// 产品类别滑动到顶固定
var navOffset=$(".contentOuter").offset().top; 
//console.log(navOffset);
//offset();方法获取的元素相对于当前document元素的位置，可以将其理解为一个绝对位置 
$(window).scroll(function(){ 
  var scrollPos=$(window).scrollTop(); 
  if(scrollPos >=navOffset){   
    $(".contentOuter").addClass("fixed"); 
    $(".tabContent").addClass("Topoff"); //固定元素下面的元素
  }else{   
    $(".contentOuter").removeClass("fixed"); 
    $(".tabContent").removeClass("Topoff"); //固定元素下面的元素
  }   
});

这个js代码的原理就是根据offset.top获取标签到屏幕顶端的距离，在根据滑动屏幕向上滚动的时候，滚动的距离和标签距离屏幕顶部的距离作对比，来判断添加固定顶部样式和移除固定顶部样式。

在写完之后以为项目的缘故，碰到一个问题，因为有的产品类型比较多，展示超过屏幕，当滑动屏幕的时候没什么问题，但是有的类别产品比较少，恰好和屏幕高度差不多，这时候就会出现一个bug，滚动条滑不到底部，找了半天发现问题出在这个固定元素的下面内容；滑动页面的时候，当前元素到顶部之后固定，但是后面的元素会直接靠近固顶元素的上面的元素，导致出现屏幕直接向上移动了一段距离，这时候我们要把固顶元素的下面内容也根据滑动的距离设置一个margin-top：固顶元素高度，如上图代码，这样就不会出现刚才的问题了。