-
效果
-
置顶时
-
下滑后
-
代码
-
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 )
});