实现滚动到一定位置时，导航栏置顶的效果

阅读：评论：0

实现滚动到一定位置时，导航栏置顶的效果

html部分:

<body>
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题1</h1>
<h1>标题2</h1>
<div class="banner"><ul><li><a href="#">标题1</a></li><li><a href="#">标题1</a></li><li><a href="#">标题1</a></li><li><a href="#">标题1</a></li><li><a href="#">标题1</a></li></ul>
</div>
<img src="1.jpg">
</body>

css部分：

<style>html,body{width:100%;}.banner{width:100%;height:50px;background:pink;}.banner ul li{list-style:none;display:inline-block;margin-right:100px;line-height:50px;}a{color:gray;text-decoration:none;}//下面这个类为动态添加的类.fixDiv{position:fixed;top:0;left:0;}</style>

js部分：

<script>$(function(){var banOffTop=$(".banner").offset().top;//获取到距离顶部的垂直距离var scTop=0;//初始化垂直滚动的距离$(document).scroll(function(){scTop=$(this).scrollTop();//获取到滚动条拉动的距离//console.log(scTop);查看滚动时，垂直方向上，滚动条滚动的距离if(scTop>=banOffTop){//核心部分：当滚动条拉动的距离大于等于导航栏距离顶部的距离时，添加指定的样式$(".banner").addClass("fixDiv");}else{$(".banner").removeClass("fixDiv");}})})
</script>

结果：
（1）初始样式：

（2）当滚动到顶部时，导航栏固定在顶部：

本文发布于:2024-01-28 12:15:56，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/17064153597354.html

上一篇：js实现html页面滚动条向下拉到一定的程度时，某个div就固定在顶部，向上拉时返回原位置。

下一篇：MFC 调用GDI库的虚线画笔绘图，放大到一定程度后变成实线解决方案

标签：置顶位置效果到一定

留言与评论（共有 0 条评论）