<jQuery>导航的滚动锚点

最新推荐文章于 2024-04-18 16:01:06 发布

MMMMMayC

最新推荐文章于 2024-04-18 16:01:06 发布

阅读量551

点赞数

分类专栏：实例代码文章标签： javascript jquery web设计导航

本文链接：https://blog.youkuaiyun.com/qq_17615475/article/details/51105308

版权

实例代码专栏收录该内容

19 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Scrolling Menu</title>
<link rel="stylesheet" href="menu.css">
</head>

<body>
	<div id="menu">
    	<ul>
        	<li><a class="active" href="#floor-1">1st Floor</a></li>
            <li><a href="#floor-2">2nd Floor</a></li>
            <li><a href="#floor-3">3rd Floor</a></li>
            <li><a href="#floor-4">4th Floor</a></li>
            <li><a href="#floor-5">5th Floor</a></li>
        </ul>
    </div>
    <div id="content">
    	<div class="floor" id="floor-1">
        	<p>1</p>
        </div>
        <div class="floor" id="floor-2">
        	<p>2</p>
        </div>
        <div class="floor" id="floor-3">
        	<p>3</p>
        </div>
        <div class="floor" id="floor-4">
        	<p>4</p>
        </div>
        <div class="floor" id="floor-5">
        	<p>5</p>
        </div>
    </div>
    <script src="jquery-1.11.1.min.js"></script>
    <script src="menu.js"></script>
</body>
</html>

/* CSS Document */
body{
	color:white;
}
.floor{
	height:800px;
	background:black;
}

#menu{
	background:white;
	color:black;
	position:fixed;
	top:50%;
	right:5%;
	padding:0;
}
ul{
	padding:0;
	margin:0;
}
li{
	display:block;
}
a{
	text-decoration:none;
	color:black;
}
.active{
	background:grey;
}

$(document).ready(function() {
    $(window).scroll(function(){
		
		var top=$(window).scrollTop();
		var nav=$("#menu");
		var cont=$("#content .floor");
		var curId="";
		
		cont.each(function() {
			var $this=$(this);
            var itemTop=$(this).offset().top;
			if(top>itemTop-100){
				curId="#"+$this.attr("id");
			}else{
				return false;
			}
        });
		
		var currentLink=nav.find(".active");
		if(curId&¤tLink.attr("id")!==curId){
			currentLink.removeClass("active");
			nav.find("[href="+curId+"]").addClass("active");
		}
	});
});

http://download.youkuaiyun.com/detail/qq_17615475/9485858