jQuery 导航自动跟随滚动是一种常见的页面交互效果，它可以使页面导航栏在用户滚动页面时自动跟随滚动并保持固定位置。下面是实现这个效果的详细攻略：
1.添加导航栏
首先，在 HTML 文件中添加一个导航栏，通常是一个 ul 列表，其中包含若干个 li 子项。
<nav>
<ul>
<li><a href="#section1">Section1</a></li>
<li><a href="#section2">Section2</a></li>
<li><a href="#section3">Section3</a></li>
</ul>
</nav>
2.为导航栏添加样式
为导航栏添加样式，使其具有固定位置和样式。
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
z-index: 100;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
}
nav li {
margin: 0;
padding: 0;
}
nav a {
display: block;
line-height: 50px;
padding: 0 15px;
color: #333;
}
3.监听页面滚动事件
使用 jQuery 监听页面滚动事件，当页面滚动时，计算当前滚动位置所在的页面区域，并将对应的导航项添加 .active 样式。
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
$('nav a').each(function() {
var href = $(this).attr('href');
var targetTop = $(href).offset().top;
var targetHeight = $(href).height();
if (scrollTop >= targetTop && scrollTop < targetTop + targetHeight) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
4.添加动画效果
使用 jQuery 的 .animate() 方法为导航栏添加动画效果，使其在滚动时平滑过渡。
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
$('nav a').each(function() {
var href = $(this).attr('href');
var targetTop = $(href).offset().top;
var targetHeight = $(href).height();
if (scrollTop >= targetTop && scrollTop < targetTop + targetHeight) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
$('nav').stop().animate({top: scrollTop}, 500);
});
示例说明
示例一：简单的单页网站
在这个示例中，我们使用上面的攻略实现了一个简单的单页网站，网站包含三个部分，每个部分都是一个 div 元素，用于演示导航栏跟随滚动的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 导航自动跟随滚动示例一</title>
<style>
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
z-index: 100;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
}
nav li {
margin: 0;
padding: 0;
}
nav a {
display: block;
line-height: 50px;
padding: 0 15px;
color: #333;
}
#section1 {
height: 500px;
background-color: #EEE;
}
#section2 {
height: 500px;
background-color: #DDD;
}
#section3 {
height: 500px;
background-color: #CCC;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#section1">Section1</a></li>
<li><a href="#section2">Section2</a></li>
<li><a href="#section3">Section3</a></li>
</ul>
</nav>
<div id="section1">Section1</div>
<div id="section2">Section2</div>
<div id="section3">Section3</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
$('nav a').each(function() {
var href = $(this).attr('href');
var targetTop = $(href).offset().top;
var targetHeight = $(href).height();
if (scrollTop >= targetTop && scrollTop < targetTop + targetHeight) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
$('nav').stop().animate({top: scrollTop}, 500);
});
</script>
</body>
</html>
示例二：带有子菜单的导航栏
在这个示例中，我们对导航栏进行了扩展，添加了子菜单，并对攻略进行了适当的修改，使其可以处理子菜单，并且在滚动到子菜单区域时高亮其父菜单。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 导航自动跟随滚动示例二</title>
<style>
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
z-index: 100;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
}
nav li {
margin: 0;
padding: 0;
position: relative;
}
nav a {
display: block;
line-height: 50px;
padding: 0 15px;
color: #333;
}
nav ul ul {
position: absolute;
top: 100%;
left: 0;
background-color: #FFF;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
z-index: 200;
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul ul li {
width: 200px;
border-bottom: 1px solid #DDD;
}
nav ul ul li:last-child {
border-bottom: none;
}
nav ul ul a {
line-height: 30px;
padding: 0 15px;
}
nav ul ul ul {
left: 100%;
top: 0;
padding-left: 10px;
}
nav ul ul li:hover > a {
background-color: #EEE;
}
nav a.active {
background-color: #EEE;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#section1">Section1</a></li>
<li>
<a href="#">Section2</a>
<ul>
<li><a href="#section2-1">Section2-1</a></li>
<li>
<a href="#">Section2-2</a>
<ul>
<li><a href="#section2-2-1">Section2-2-1</a></li>
<li><a href="#section2-2-2">Section2-2-2</a></li>
</ul>
</li>
<li><a href="#section2-3">Section2-3</a></li>
</ul>
</li>
<li><a href="#section3">Section3</a></li>
</ul>
</nav>
<div id="section1">Section1</div>
<div id="section2">
<h2>Section2</h2>
<div id="section2-1">Section2-1</div>
<div id="section2-2">
<h3>Section2-2</h3>
<div id="section2-2-1">Section2-2-1</div>
<div id="section2-2-2">Section2-2-2</div>
</div>
<div id="section2-3">Section2-3</div>
</div>
<div id="section3">Section3</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
$('nav a').each(function() {
var href = $(this).attr('href');
var targetTop = $(href).offset().top;
var targetHeight = $(href).height();
if (scrollTop >= targetTop && scrollTop < targetTop + targetHeight) {
$(this).addClass('active');
$(this).parents('li').children('a').addClass('active');
$(this).parents('li').parents('ul').children('li').children('a').not($(this).parents('li').children('a')).removeClass('active');
} else {
$(this).removeClass('active');
}
});
$('nav').stop().animate({top: scrollTop}, 500);
});
</script>
</body>
</html>
通过对这两个示例的对比，我们可以看到，在网站中添加导航自动跟随滚动效果不仅可以提升用户体验，还可以改善网站的整体风格和设计。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 导航自动跟随滚动的实现代码 - Python技术站
微信扫一扫 
支付宝扫一扫 