h5移动端滑动内容置顶

就想很多导航栏一样，这次是一个列表类型的滑动置顶需求，首先引入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：固顶元素高度，如上图代码，这样就不会出现刚才的问题了。