js实现导航栏随着页面向下滑动逐渐显示，向上滑动逐渐隐藏

一、html代码

 <!-- 导航栏 -->

    <nav id="dao">

      <x-icon type="ios-arrow-back" size="30" class="cell-back" id="cell-back"></x-icon>

      <h4 id="navtext">{{Jingyuan}}</h4>

    </nav>

二、css代码

#dao {

  position: fixed;

  left: 0;

  top: 0;

  right: 0;

  width: 100%;

  height: 3rem;

  z-index: 999;

}

#navtext {

  position: absolute;

  left: 50%;

  top: 50%;

  text-align: center;

  transform: translate(-50%, -50%);

  color: #fff;

  /* background: rgb(66, 65, 66) */

}

#cell-back {

  position: absolute;

  left: 0;

  top: 50%;

  transform: translate(0, -50%);

  fill: #fff;

}

三、js代码：

 

<script>

    window.onscroll = function () {

      var h = document.documentElement.scrollTop || document.body.scrollTop;

      console.log(h * 2.5);      //控制台查看监听滚动  

      var headerTop = document.getElementById("dao");//获取导航栏id

      var navtext = document.getElementById("navtext");//获取导航栏中的文字id

      var back = document.getElementById("cell-back");//获取导航栏中的返回图标icon id

      if (h >= 42) {       //header的高度是40px;     

        headerTop.style.background = "#fff";

        headerTop.style.color = "rgba(66,65,66,1)";

        // 设置导航栏中的文字样式

        navtext.style.background = "#fff";

        navtext.style.color = "rgba(66,65,66,1)";

        // 设置导航栏中的返回图标icon样式

        back.style.background = "#fff";

        back.style.fill = "rgba(19,146,245,1)";

      } else {

        if (h < 10) {

          //40*2.5=100;这样透明度就可以由0渐变到100%；

          headerTop.style.background = "rgba(255,255,255,0.0" + h * 2.5 + ")";

          headerTop.style.color = "rgba(66,66,66,0.0" + h * 2.5 + ")";

          navtext.style.background = "rgba(255,255,255,0.0" + h * 2.5 + ")";

          navtext.style.color = "rgba(66,66,66,0.0" + h * 2.5 + ")";

          back.style.background = "rgba(255,255,255,0.0" + h * 2.5 + ")";

          back.style.fill = "rgba(19,146,246,0.0" + h * 2.5 + ")";

        } else if (h > 10 && h <= 42) {

          headerTop.style.background = "rgba(255,255,255,0." + h * 2.5 + ")";

          headerTop.style.color = "rgba(66,66,66,0." + h * 2.5 + ")";

          navtext.style.background = "rgba(255,255,255,0." + h * 2.5 + ")";

          navtext.style.color = "rgba(66,66,66,0." + h * 2.5 + ")";

          back.style.background = "rgba(255,255,255,0." + h * 2.5 + ")";

          back.style.fill = "rgba(19,146,245,0." + h * 2.5 + ")";

 

        }

 

      }

    };

  </script>