swiper组件实现tab——内容切换、动态数据请求、加载（续）——通过监测手指滑动实现导航吸顶

这篇文章是swiper组件实现tab——内容切换、动态数据请求、加载的续篇，主要内容是通过监测手指滑动方向来实现导航吸顶及归位。

本篇文章是我在项目实现中的总结，本篇实现了在移动端监测手指滑动情况，通过上拉下滑检测与顶部的距离，实现导航吸顶及顶部轮播图的显示与隐藏。

 

// 监测手指滑动事件
$("body").on("touchstart", function(e) {
  // 判断默认行为是否可以被禁用
  if (e.cancelable) {
      // 判断默认行为是否已经被禁用
      if (!e.defaultPrevented) {
          e.preventDefault();
      }
  } 
  startX = e.originalEvent.changedTouches[0].pageX,
  startY = e.originalEvent.changedTouches[0].pageY;
  console.log(startX);
  console.log(startY);
});
$("body").on("touchend", function(e) {      
    // 判断默认行为是否可以被禁用
    if (e.cancelable) {
        // 判断默认行为是否已经被禁用
        if (e.defaultPrevented) {
            e.preventDefault();
        }
    }         
    moveEndX = e.originalEvent.changedTouches[0].pageX,
    moveEndY = e.originalEvent.changedTouches[0].pageY,
    X = moveEndX - startX,  //横向滑动的数值
    Y = moveEndY - startY;  //纵向滑动的数值  下拉数值为负   上滑数值为正

    //判断纵向滚动的数值大小
    if(Y>0){
      console.log("下拉")  //下拉导航归位并出现轮播图

      //整个列表的滑动是在$('.w').css('transform', 'translate3d(0px, 0px, 0px)')的影响下进行的
      //translate3d中第二个数值的变化是纵向轴变化
      //通过判断这个值的大于0或者小于0 做判断。具体我会另外写一篇关于translate的介绍。
      var translates=$('.w').css('transform');  
      var tranChar = translates.substring(7).split(',');
      var slippingY = parseFloat(tranChar[5]);
      console.log(slippingY);  

      //如果滑动的值大于0，则导航归位，出现导航栏以上的内容。
      if(slippingY>0){
        console.log("true")
        $("#nav").removeClass("navToTop"); 
        $("#myCarousel").fadeIn(500); 

      }
      console.log("false")

    }else if(Y<0){

      console.log("上滑")   //上滑导航吸顶
      $("#nav").addClass("navToTop");  //通过CSS设置吸顶样式
      $("#myCarousel").fadeOut(); 

    } 
});


//css
/*滚动置顶*/
.navToTop{
  z-index: 100;
  position: fixed;
  top: 0px;
  margin-left: 0px;
  width: 375px;
  left: 0px;
  overflow-x: scroll;
}