<!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> <!-- 锚点实现的快速定位: 通过a里面+#每层的id名字-->
* { 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%; 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高/ // 思路是当滚动的距离大于一个楼层的高度时，换到下一个楼层 //这里不需要添加点击事件的原因是，有锚点了。通过锚点的快速定位。