下拉一定高度顶部导航条浮动并固定显示
下拉一定高度顶部导航条浮动并固定
浏览器下拉滚动到一定高度后，头部导航出现并固定浮动。
<body style="background:#f4f4f4;min-height:2000px;">
<nav class="nav">
<div class="nav-content">
<div class="flex nav-top">
<div>logo</div>
<div class="item">
<input type="text" class="nav-search" placeholder="请输入搜索内容">
</div>
<div>购物车</div>
</div>
<div class="nav-list">
<ul>
<li>网站首页</li>
<li>任务要闻</li>
<li>今日头条</li>
<li>意见专栏</li>
<li>母婴儿童</li>
<li>汽车制造</li>
</ul>
</div>
</div>
</nav>
<div class="hide bg-blue">
<div class="flex nav-top" style="padding-top:0;">
<div>logo</div>
<div class="item">
<input type="text" class="nav-search" placeholder="请输入搜索内容">
</div>
<div>购物车</div>
</div>
</div>
</body>
CSS部分
.nav {
background-color: #fff;
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
height: 200px;
}
.nav-content {
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.nav-list {
overflow: hidden;
padding-top: 50px;
}
.nav-list li {
width: 200px;
text-align: center;
font-weight: 600;
float: left;
color: #333
}
.nav-top {
padding-top: 50px;
text-align: center;
}
.nav-search {
border: 1px #ececec solid;
width: 500px;
height: 50px;
text-indent: 10px;
}
.search-fix {
display: block!important;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
border-bottom: 2px solid #f10214;
background-color: #fff;
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
-webkit-animation: searchTop .3s ease-in-out;
animation: searchTop .3s ease-in-out
}
@-webkit-keyframes searchTop {
0% {
top: -50px
}
to {
top: 0
}
}
@keyframes searchTop {
0% {
top: -50px
}
to {
top: 0
}
}
js部分
document.addEventListener("scroll",function(){
var downSearch = document.querySelector(".bg-blue");
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop >= 350){
downSearch.classList.add("search-fix")
}else if(scrollTop <= 250){
downSearch.classList.remove("search-fix")
}
console.log(scrollTop);
})
