首先把html基本代码写好, index.html页面
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>随屏滚动导航</title><link rel="stylesheet" href="./css/style.css"/><script type="text/javascript" src="./js/jquery-1.11.1.js"></script><script type="text/javascript" src="./js/scroll.js"></script>
</head>
<body>
<div id="menu"><ul><li><a href="#item1" class="current">1F</a></li><li><a href="#item2">2F</a></li><li><a href="#item3">3F</a></li><li><a href="#item4">4F</a></li><li><a href="#item5">5F</a></li></ul>
</div>
<div id="content"><h1>欢迎来到随屏滚动导航</h1><div id="item1" class="item clearfix" ><!-- name="item1" --><h2>1F 杀姐姐</h2><ul><li><a href="#"><img src="./images/1F.jpg"></a></li><li><a href="#"><img src="./images/1F.jpg"></a></li><li><a href="#"><img src="./images/1F.jpg"></a></li><li><a href="#"><img src="./images/1F.jpg"></a></li><li><a href="#"><img src="./images/1F.jpg"></a></li><li><a href="#"><img src="./images/1F.jpg"></a></li><li><a href="#"><img src="./images/1F.jpg"></a></li><li><a href="#"><img src="./images/1F.jpg"></a></li><li><a href="#"><img src="./images/1F.jpg"></a></li></ul></div><div id="item2" class="item clearfix" ><h2>2F 东方</h2><ul><li><a href="#"><img src="./images/2F.jpg"></a></li><li><a href="#"><img src="./images/2F.jpg"></a></li><li><a href="#"><img src="./images/2F.jpg"></a></li><li><a href="#"><img src="./images/2F.jpg"></a></li><li><a href="#"><img src="./images/2F.jpg"></a></li><li><a href="#"><img src="./images/2F.jpg"></a></li><li><a href="#"><img src="./images/2F.jpg"></a></li><li><a href="#"><img src="./images/2F.jpg"></a></li><li><a href="#"><img src="./images/2F.jpg"></a></li></ul></div><div id="item3" class="item clearfix"><h2>3F 糖宝</h2><ul><li><a href="#"><img src="./images/3F.jpg"></a></li><li><a href="#"><img src="./images/3F.jpg"></a></li><li><a href="#"><img src="./images/3F.jpg"></a></li><li><a href="#"><img src="./images/3F.jpg"></a></li><li><a href="#"><img src="./images/3F.jpg"></a></li><li><a href="#"><img src="./images/3F.jpg"></a></li><li><a href="#"><img src="./images/3F.jpg"></a></li><li><a href="#"><img src="./images/3F.jpg"></a></li><li><a href="#"><img src="./images/3F.jpg"></a></li></ul></div><div id="item4" class="item clearfix"><h2>4F 花和杀姐姐</h2><ul><li><a href="#"><img src="./images/4F.jpg"></a></li><li><a href="#"><img src="./images/4F.jpg"></a></li><li><a href="#"><img src="./images/4F.jpg"></a></li><li><a href="#"><img src="./images/4F.jpg"></a></li><li><a href="#"><img src="./images/4F.jpg"></a></li><li><a href="#"><img src="./images/4F.jpg"></a></li><li><a href="#"><img src="./images/4F.jpg"></a></li><li><a href="#"><img src="./images/4F.jpg"></a></li><li><a href="#"><img src="./images/4F.jpg"></a></li></ul></div><div id="item5" class="item clearfix"><h2>5F 花千骨</h2><ul><li><a href="#"><img src="./images/5F.jpg"></a></li><li><a href="#"><img src="./images/5F.jpg"></a></li><li><a href="#"><img src="./images/5F.jpg"></a></li><li><a href="#"><img src="./images/5F.jpg"></a></li><li><a href="#"><img src="./images/5F.jpg"></a></li><li><a href="#"><img src="./images/5F.jpg"></a></li><li><a href="#"><img src="./images/5F.jpg"></a></li><li><a href="#"><img src="./images/5F.jpg"></a></li><li><a href="#"><img src="./images/5F.jpg"></a></li></ul></div>
</div>
</body>
</html>
> css样式很简单,style.css
*{margin:0;padding:0;}
body{font-size: 12px;line-height: 1.4px;color: #000;}
a{text-decoration: none;}
li{list-style: none;}
#content{width:800px;margin:0 auto;padding:20px;}
#content .item{border:1px dotted #0088bb;padding:20px;margin-bottom: 20px;}
#content h2{font-size:16px;font-weight: bold;margin-bottom: 10px;border-bottom:2px solid #0088bb;height:20px;line-height: 20px;}
h1{color: #0088bb;height:38px;line-height: 38px;}
#content ul li{margin-right: 10px;margin-bottom: 10px;float: left;}
#content ul li img{width:230px;height: 230px;border:none;}
#menu{position: fixed;top:100px;left: 50%;margin-left: 400px;}
#menu li a{line-height: 50px;display: block;margin:5px 0;font-size: 14px;font-weight: bold;width: 80px;height: 50px;text-align: center;}
#menu li a:hover,#menu li a.current{color: #fff;background-color: #0088bb}
.clearfix{overflow:auto;_height:1%}
下面就是关键的jquery代码啦,scroll.js
$(function(){$(window).scroll(function(){var staTop=document.documentElement.scrollTop-0.01;$("html,body").animate({scrollTop:staTop},0);$("html,body").animate({scrollTop:staTop+0.01},0);var top=$(document).scrollTop();/*获取滚动条的高度*/console.log("top:",top);var items=$("#content").find(".item");var currentId="";/*目前显示的是哪个div*/items.each(function(){var m=$(this);var itemTop=m.offset().top;/*当前div到顶部的距离*/console.log("itemTop:",itemTop);if(top>itemTop - 200){currentId="#"+m.attr("id");console.log("currentId:",currentId);}else{return false;}});//给相应的楼层a设置current,取消其他链接的currentvar menu=$("#menu");var currentLink=menu.find(".current");if(currentId&¤tLink.attr('href')!=currentId){currentLink.removeClass('current');menu.find("[href="+currentId+"]").addClass('current');}});
});
下面看一下运行效果
点击右侧的导航条,左侧的内容会跳到相应F楼层div;屏幕随着滚动条的滚动,左侧显示到哪个div,右侧的导航条也会高亮显示当前楼层。这就实现了左右侧相互控制导航的效果了