jQuery滚动监听导航栏(导航栏点击跳转对应界面并且变色)

zyj12138

于 2019-08-01 11:37:21 发布

阅读量2.2k

点赞数

分类专栏： jquery 文章标签：滚动监听

本文链接：https://blog.csdn.net/zyj12138/article/details/98038432

版权

这篇博客介绍了如何使用jQuery实现滚动监听导航栏，当滚动到特定内容区域时，导航栏相应链接会变色。首先创建多个div作为内容区，设置固定位置的导航栏，并通过jQuery设置点击跳转功能。接着，通过监听滚动条位置，当滚动到特定div时，改变导航栏链接的样式，从而实现导航栏的高亮效果。这个方法对于网页交互设计有很好的应用价值。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
    

			$('.daohang li').eq(0).click(function(){
    
				$('html, body').animate({
      
					  scrollTop: $("#div1").offset().top  
					}, 200); 
			});


			$('.daohang li').eq(1).click(function(){
    
				$('html, body').animate({
      
					  scrollTop: $("#div2").offset().top  
					}, 200); 
			});
			$('.daohang li').eq(2).click(function(){
    
				$('html, body').animate({
      
					  scrollTop: $("#div3").offset().top  
					}, 200); 
			});
			$('.daohang li').eq(3).click(function(){
    
				$