大家好 ,做网站的时候我们总是遇见想,导航下拉的时候能够跟随的底部或者某个位置不变一直显示,今天小秋就举个例子来说说吧!
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>
- 相关链接:
下一篇:CSS3渐变色
- 文章标题:
https://www.ezgcms.com/stuyd/843.html
- css如何用实现弧度圆角?三角形以及圆形样式
- CSS div部分随的屏幕滚动而滚动的方法
- css3实现隔行换色
- 网页特效粒子交叉线条背景动态鼠标联动【css】
- 下拉一定高度顶部导航条浮动并固定显示
- JavaScript 实现网站标签随机颜色的方法
- HTML高亮关键字的完美解决方案_HTML/Xhtml_网页制作
- css超出显示省略号怎么设置
- js实现点击显示和隐藏特效代码
- CSS固定背景图片不跟随浏览器的滚动
- 弹性布局(display:flex;)属性详解【CSS教程】
- 新人怎么 学习网站建设心得
- zblog后台文章总数跟作者对不上怎么回事
- 第七章 CSS 各种滤镜
- 第九章 CSS 构造模型学习吧