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

最新推荐文章于 2025-07-29 15:32:09 发布

原创最新推荐文章于 2025-07-29 15:32:09 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#导航吸顶 #监测手指滑动距离

前端相关手记同时被 2 个专栏收录

33 篇文章

订阅专栏

16 篇文章

订阅专栏

本文介绍了一种在移动端应用中，通过监测手指滑动方向实现导航条吸顶效果及顶部轮播图自动显示与隐藏的方法。利用jQuery监听touchstart和touchend事件，计算滑动方向，根据不同滑动方向调整导航条状态。

这篇文章是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;
}