h5移动端滑动内容置顶

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

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

html代码：

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：固顶元素高度，如上图代码，这样就不会出现刚才的问题了。