<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="UTF-8">
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="content">
<div id="floor1" class="item" >
<h2>1F</h2>
<ul>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor2" class="item">
<h2>2F</h2>
<ul>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor3" class="item">
<h2>3F</h2>
<ul>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor4" class="item">
<h2>4F</h2>
<ul>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor5" class="item">
<h2>5F</h2>
<ul>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
</ul>
</div>
</div>
<div id="fixed-tool">
<ul>
<li><a href="#floor1" class=‘current‘>淘宝汇吃</a></li>
<li><a href="#floor2">极有加</a></li>
<li><a href="#floor3">格调</a></li>
<li><a href="#floor4">中国质造</a></li>
<li><a href="#floor5">亲宝贝</a></li>
</ul>
</div>
</body>
</html>* {
???margin: 0;
???padding: 0
}
body {
???font: normal 12/24px ‘宋体‘ arial;
}
.item {
???width: 364px;
???height: 382px;
???border: 1px solid #bfbfbf;
???margin-bottom: 20px;
???position: relative;
???left: 50%;
???margin-left: -200px;
}
.item h2 {
???width: 364px;
???font-size: 16px;
???font-weight: bold;
???background: blue;
???text-align: center;
}
/*#item ul{margin-left: 17px;margin-top: 20px;}*/
.item ul li {
???list-style: none;
???float: left;
???border: 1px solid #ccc;
???height: 120px;
}
.item ul li img {
???width: 120px;
???height: 120px;
}
#fixed-tool {
???position: fixed;
???left: 50%;
???margin-left: 300px;
???top: 100px;
}
#fixed-tool li{
???list-style: none;
}
#fixed-tool li a {
???padding: 5;
???display: block;
???text-decoration: none;
???border-bottom: 1px dotted #ccc;
???text-align: center;
???width: 40px;
???height: 40px;
???color: #f93;
}
.current{
???background: blue;
}
/*当margin:0 auto时，margin:left top right 之类的实效
居中显示left:50%;width: 400px;margin-left:-200px;
发现有多个a占据着120x16的高度，通过设置#item ul li高度使其直接占据。
margin:0 auto实效的原因
1.要给居中的元素一个宽度，否者无效。
2.该元素一定不能浮动，否者无效。*/$(function() {
???// $(‘.fixed-tool ul li a‘).each(function() {
???// ????$(this).bind(‘click‘, function() {
???// ????????var $li = $(this).parent();
???// ????????$li.addClass(‘current‘).siblings().removeClass(‘current‘);
???// ????});
???// });
???$(window).scroll(function() {
???????var top = $(document).scrollTop(); //屏幕滚动的距离
???????// console.log(top);
???????var $item = $(‘#content‘).find(‘.item‘); //找到了div
???????var $menu = $(‘#fixed-tool‘); //找到了工具条
???????var currentId = ‘‘; //当前所在楼层的Id
???????$item.each(function() {
???????????var m = $(this); //每个楼层所在的对象
???????????var itemTop = m.offset().top;//为每个楼层的高度
???????????//获取偏移 有左右
???????????// console.log(m.offset().top);
???????????if (top > itemTop-20) {//这里就解决了临界的问题
???????????????currentId = ‘#‘ + m.attr(‘id‘);//如果大于当前楼层的高度，就把当前楼层的高度赋给currentId
???????????} else {
???????????????return false;
???????????????//如果已经找到了2,345就不用走了，直接跳出循环，提高效率
???????????}
???????});
???????var currentLink=$menu.find(‘.current‘);
???????//如果top很低，则为空，后面的如果刚好为currentId时，就不需要取消
???????if(currentId&¤tLink.attr(‘href‘)!=currentId){
???????????//1是当高度还很低，没达到时，使currentId为空,2是当前的current所对应的a的href属性不为本身时，
???????????currentLink.removeClass(‘current‘);//去掉不正确的样式
???????????$menu.find(‘[href="‘+currentId+‘"]‘).addClass(‘current‘);//找到正确的链接，加上样式
???????}
???});
???// 滚动监听
});
// /jquery通过id获取到的效率比class高/
// 思路是当滚动的距离大于一个楼层的高度时，换到下一个楼层
//这里不需要添加点击事件的原因是，有锚点了。通过锚点的快速定位。jquery实现网页定位导航特效
原文地址：https://www.cnblogs.com/CaseyWei/p/9476794.html