导航栏背景下滑显示置顶透明

• 效果

• 置顶时
  

• 下滑后
  

• 代码

• html

<div id="headerTop">
   <header class = "main">
       <div class="logo l">
           <p>Classic</p>
       </div>
       <div class="ulList">
           <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Aboout</a></li>
               <li><a href="#">Services</a></li>
               <li><a href="#">Portfolio</a></li>
               <li><a href="#">Team</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </div>
   </header>
</div>

• css

/*通用样式*/
.main{ width: 1340px;  margin:0 auto;}  /*margin: auto; -> 使该区域在浏览器中央*/
* {
 margin: 0; /* 外边距 */
 padding: 0; /* 内边距 */
 font-family: sans-serif; /* 字体样式 */
 }
 .l{ float: left;}
 .r{float: right;}
 li{list-style: none;}   /*list-style: none -> 去掉ul标签前的小圆点*/
 a{text-decoration: none; color: #000;}      /*text-decoration: none -> 去掉a标签的下划线*/
 
 /*主要部分*/
body{
    width: 100%;
    height: 1080px;
    background: black;
}
#headerTop{
    height: 78px;
    width: 100%;
    line-height: 78px;
    /*使导航栏固定在顶部*/
    position: fixed;   
    top:0;
    left: 0px;
    z-index: 1000;	/*一开始就不给导航栏设置背景色*/
}
#headerTop header .logo p{
    font-size: 32px;
    font-weight: 700;
    color: #65666c;
}
#headerTop header .ulList ul{   /*使ul靠右*/
    display: flex;
    flex-direction: row;	/*使子项显示为行，从左到右显示*/
    justify-content: flex-end;	/*让子项li靠区域结束位置对齐*/
}
#headerTop header .ulList ul li a{
    font-size: 16px;
    margin: 0 12px;
    color: #fff;
}

/*滑动鼠标滚轮后*/
#headerTop.sticky{
    background: pink;
    border: 1px solid #dbdde1;
}

• js

// 使顶部导航栏下滑显示，上滑透明 
// 添加滚动事件
window.addEventListener('scroll', function() {
    //获取元素
    var header = document.querySelector("header");  //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
    // 添加类
    header.classList.toggle("sticky", window.scrollY > 0 )
});