下拉一定高度顶部导航条浮动并固定显示

小秋同学 11-07 12:50:58 学习园地

默认

摘要： 下拉一定高度顶部导航条浮动并固定浏览器下拉滚动到一定高度后，头部导航出现并固定浮动。<body style="background:#f4f4f4;min-height:2000px;"> &

下拉一定高度顶部导航条浮动并固定
浏览器下拉滚动到一定高度后，头部导航出现并固定浮动。

<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);
})

标签： CSS教程 JS教程技巧学习建站学习网站建设怎么建站

文章版权及转载声明：

编辑:小秋同学本文地址：https://www.qiuhai.com/study/843.html发布于 11-07 12:50:58
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明，均采集网上收集，若要转载请务必注明出处，尊重他人劳动成果共创和谐网络环境。声明：某些文章来源于网络，所采集的到信息本站只为传递信息和分享，不做任何双方证明，也不承担任何法律责任。文章内容若侵犯你的权益，请联系本站客服删除！

施舍