实现滑动滚动条，导航栏消失和复现的效果

首先要做的就是监听滚动条的位置。然后通过位置来改变顶部导航栏的距离

此代码是基于vue写的，所以开始现在mounted里面去给浏览器添加scorll监听

 data() {
    return {
      scrollTop: 0,
    };
  },
 mounted() {
    window.addEventListener("scroll", this.btn_pos);
  },

逻辑部分

btn_pos() {
      let scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop > 300) {
        $(".top").show(500);
      } else {
        $(".top").hide(500);
      }
      if (this.scrollTop < scrollTop) {
        if (scrollTop > 100) {
          if (scrollTop > 200) {
            $(".header").css("top", "-72px");
            this.scrollTop = scrollTop;
          } else {
            $(".header").css({
              background: "rgba(0,0,0,.8)",
            });
            this.scrollTop = scrollTop;
          }
        } else {
          $(".header").css("top", "0px");
          $(".header").css({
            background: "rgba(0,0,0,.8)",
          });
          this.scrollTop = scrollTop;
        }
      } else {
        if (this.scrollTop < 50) {   //小于50则说明快到顶了，这个时候就需要去掉之前加深的背景色，让他恢复原来的样子
          $(".header").css("top", "0");
          $(".header").css({
            background: "none",
          });
        } else {  
          $(".header").css("top", "0");
          $(".header").css({
            background: "rgba(0,0,0,.8)",
          });
        }
        this.scrollTop = scrollTop;
      }
    },

每次做出滚动条发生改变之后，都要记录下来。这样就可以帮助我们去实现，浏览到一半，往上滚动，出现导航栏的效果。 首先判断我们记录的滚动条的值是不是大于当前滚动条的值。如果大于，则说明当前用户正在执行往上滚动滚动条的操作。这个时候就需要让导航栏出现。
如果小于，则说明用户此时正处在往下浏览网页的时候。 这个时候就可以把导航栏给收起来。这里我多判断了一次scrollTop是不是大于100，因为网页样式的问题，在滚动条只往下滚了一点点的时候，不收起导航栏，只是加深一点背景色。具体可自行调整。

代码有些冗余，可以精简一下。