1. <body>
  2.     <div id="nav"></div>
  4.     <script>
  5.         var nav = document.getElementById("nav");
  6.         // 1.对窗口执行监听事件
  7.         window.onscroll = function(){
  8.             // 2.获取滚动条的高度
  9.             var scrollTop = document.documentElement.scrollTop;
  10.             // 3.得到透明度
  11.             var opacity = scrollTop/200;
  12.             // opacity  透明度不能大于1
  13.             if(opacity>1){
  14.                 opacity=1
  15.             }
  16.             nav.style.opacity = opacity;
  17.             console.log(opacity)
  18.         }
  20.     </script>

方法2

  1. <style>
  2.         *{margin: 0;padding: 0;}
  3.         div{
  4.             height: 50px;
  5.             width: 100%;
  6.             background-color: red;
  7.             position: fixed;
  8.             opacity: 0;
  9.         }
  10.         body{
  11.             height: 2000px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="app"></div>
  17.     <script>
  18.        var app = document.getElementById("app");
  19.         onscroll = function(){
  20.             var scrollTop = document.documentElement.scrollTop;
  21.             var opacity = scrollTop/200;
  22.             if(opacity>1){
  23.                 opacity=1;
  24.             }
  25.            app.style.opacity=opacity;
  27.         }
  28.     </script>