头部导航下拉跟随的效果实例CSS教程

2020-11-15 11:25:32 学习园地

大家好 ,做网站的时候我们总是遇见想,导航下拉的时候能够跟随的底部或者某个位置不变一直显示，今天小秋就举个例子来说说吧！

JS部分（此段上下啦不隐藏）

<script>
document.addEventListener("scroll",function(){
var downSearch = document.querySelector(".bg-blue");
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop >= 680){
downSearch.classList.add("search-fixs")
}else if(scrollTop <= 680){
downSearch.classList.remove("search-fixs")
}
console.log(scrollTop);
})
</script>

或者：（以下是上啦隐藏）

<script>
$(function(){
//页面初始化的时候，获取滚动条的高度（上次高度）
var start_height = $(document).scrollTop();
//获取导航栏的高度(包含 padding 和 border)
var navigation_height = $('.bg-blue').outerHeight();
$(window).scroll(function() {
//触发滚动事件后，滚动条的高度（本次高度）
var end_height = $(document).scrollTop();
//触发后的高度与元素的高度对比
if (end_height > navigation_height){
$('.bg-blue').addClass('search-fixs');
}else {
$('.bg-blue').removeClass('search-fixs');
}
//触发后的高度与上次触发后的高度
if (end_height < start_height){
$('.bg-blue').removeClass('search-fixs');
}
//再次获取滚动条的高度，用于下次触发事件后的对比
start_height = $(document).scrollTop();
});
});
</script>

红色字表示：触发的JS开始标记

蓝色字表示：CSS样式

htm部分

为

<div class="bg-blue" style="display:none;">把你的导航代码内容放在这里</div>

CSS样式

<style>
.search-fixs {
display: block!important;
position: fixed;
left: 0;
top: 0;
height: 145px;
width: 100%;
border-bottom: 2px solid #f10214;
background-color: #ffffff;
-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
z-index:99999999999999;
}

@-webkit-keyframes searchTop {
0% {
top: -50px
}

to {
top: 0
}
}

@keyframes searchTop {
0% {
top: -50px
}

to {
top: 0
}
}
</style>