上滑隐藏，下滑显示顶部导航栏

效果图

e314e18ebf5f49822111825d97a7891.png 3ab95a53c78feb102b3ab73263611a1.png

通过手势改变导航栏的显示和隐藏

实现思路

1. 通过给顶部导航栏添加，移除 class 来实现隐藏和显示的动画

代码实现

header的css样式

.header_box {
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    padding: 27rem  40rem;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
  // 给header设置过渡时间
    transition: all 0.3s ease-in;

    span {
      display: inline-block;
    }

    .logo {
      width: 308rem;
      height: 55rem;
      background: url("../images/logo.png") no-repeat center/cover;
    }

    .menu {
      width: 38rem;
      height: 28rem;
      background: url("../images/menu.png") no-repeat center/cover;
    }
  }
  
  // 通过改变 Y轴来隐藏导航
   .header_box.hidden_header {
    transform: translateY(-100%);
   } 

js代码

let startY = 0,
        distanceY = 0,
        isHidden =  $('header_box').hasClass('hidden_header'), 
        isMove = false

  
    $(window).on('touchstart',function (e) {
        // 获得开始触摸的Y点
        startY = e.targetTouches[0].clientY
    }).on('touchmove',function (e) {
    isMove = true
        var moveY = e.targetTouches[0].clientY
        // 计算移动距离
        distanceY = moveY - startY
     
    }).on('touchend',function (e) {
        // 移动结束时 判断移动距离是否是小于0 ， 是小于0则表示是上滑
        if(isMove){
            /*手势*/
            /*上滑手势*/
            if(distanceY <=  0){
               
               $('.header_box').addClass('hidden_header')
            }
            /*下滑手势*/
            else {
                //console.log('prev');
                $('.header_box').removeClass('hidden_header')
            }
        }
         startX = 0;
        distanceX = 0;
        isMove = false;
        
    });