本文介绍如何利用JavaScript结合scroll与offset系列属性，实现导航栏在页面滚动至特定位置时的吸顶效果。通过监听滚动事件，判断导航元素距离顶部的偏移量与屏幕卷去高度的关系，动态添加或移除固定定位类名，从而完成导航栏的吸附固定功能。
JavaScript实现导航栏吸顶效果详解
本文分享了一段使用JavaScript实现导航栏吸顶特效的完整代码示例，供读者参考学习。
核心知识点
核心知识点
1. scroll家族和offset家族的结合运用 2. 当nav的offsetTop大于屏幕卷去高度的时候，进行吸顶 3. 添加一个固定类，如果满足条件，为nav加类名
运行效果演示
运行效果演示
在页面滚动过程中，导航栏会在到达指定位置后自动吸附在窗口顶部。
代码实现部分
代码实现部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;list-style: none;border:none}
img{vertical-align: top;width: 100%;}
section{width: 70%;margin: 0 auto;}
.nav{position: fixed;left: 0;top: 0;width: 100%}
</style>
</head>
<body>
<header id="head">
<img src="images/top.png" alt="">
</header>
<nav id="nav">
<img src="images/nav.png" alt="">
</nav>
<section>
<img src="images/body01.png" alt="">
<img src="images/body02.png" alt="">
</section>
<script src="../../MyTools/MyTools.js"></script>
<script>
window.addEventListener('load',function (ev) {
// 1. 求出头部高度
var navTopHeight = myTool.$('nav').offsetTop;
// 2. 监听页面滚动
window.addEventListener('scroll',function (ev1) {
var scrollTopHeight = myTool.scroll().top;
// 2.1 判断
if(scrollTopHeight >= navTopHeight){
myTool.addClassName(myTool.$('nav'),'nav')
}else{
myTool.removeClassName(myTool.$('nav'),'nav');
}
})
})
</script>
</body>
</html>以上内容为本文的全部分享，希望能为读者的学习提供一定帮助，同时也欢迎大家继续支持本站。