您的位置：首页 > 其它

网页定位导航

2016-05-04 11:25 323 查看

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>购物网-定位导航</title> <style> * { margin: 0; padding: 0; } body { font-size: 12px; line-height: 1.7; } li { list-style: none; } #content { width: 800px; margin: 0 auto; padding: 20px; } #content h1 { color: #0088bb; } #content .item { padding: 20px; margin-bottom: 20px; border: 1px dotted #0088BB; } #content .item h2 { font-size: 16px; font-weight: bold; border-bottom: 2px solid #0088BB; margin-bottom: 10px; } #content .item li { display: inline; margin-bottom: 10px; } #content .item li a img { width: 230px; height: 230px; border: none; } #menu { position: fixed; top: 100px; left: 50%; margin-left: 400px; width: 80px; } #menu ul li a { display: block; margin: 5px 0; font-size: 14px; font-weight: bold; color: #333; width: 80px; height: 50px; line-height: 50px; text-decoration: none; text-align: center; } #menu ul li a:hover, #menu ul li a.current { color: #fff; background: #0088BB; } </style>  <script type="text/javascript" src="js/jquery-1.7.1.min.js"> </script> </script> <script type="text/javascript"> $(document).ready(function() { //滚动条发生滚动 $(window).scroll(function() { var top = $(document).scrollTop(); //console.log(top);//滚动条距离顶部的距离 var menu = $("#menu"); var items = $("#content").find(".item"); var currentId = ""; //当前所在对的楼层(item)id items.each(function() { var m = $(this); var itemTop = m.offset().top;//offset:返回一个对象，包含top和left属性，对应匹配元素的top，left相对偏移 /*console.log(itemTop);*/ if (top > itemTop-200) { currentId = " #" + m.attr("id"); } else { return false; } }); //给相应楼层的a，设置current,取消其他楼层的current var currentLink=menu.find(".current"); if (currentId&¤tLink.attr("href")!=currentId) { currentLink.removeClass("current"); menu.find("[href="+currentId+"]").addClass("current"); } }); }); </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"> <h2>1F 男装</h2> <ul> <li> <a href=""><img src="img/1F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/1F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/1F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/1F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/1F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/1F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/1F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/1F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/1F.jpg" alt="" /></a> </li> </ul> </div> <div id="item2" class="item"> <h2>2F 女装</h2> <ul> <li> <a href=""><img src="img/2F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/2F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/2F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/2F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/2F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/2F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/2F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/2F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/2F.jpg" alt="" /></a> </li> </ul> </div> <div id="item3" class="item"> <h2>3F 美妆</h2> <ul> <li> <a href=""><img src="img/3F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/3F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/3F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/3F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/3F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/3F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/3F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/3F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/3F.jpg" alt="" /></a> </li> </ul> </div> <div id="item4" class="item"> <h2>4F 数码</h2> <ul> <li> <a href=""><img src="img/4F.png" alt="" /></a> </li> <li> <a href=""><img src="img/4F.png" alt="" /></a> </li> <li> <a href=""><img src="img/4F.png" alt="" /></a> </li> <li> <a href=""><img src="img/4F.png" alt="" /></a> </li> <li> <a href=""><img src="img/4F.png" alt="" /></a> </li> <li> <a href=""><img src="img/4F.png" alt="" /></a> </li> <li> <a href=""><img src="img/4F.png" alt="" /></a> </li> <li> <a href=""><img src="img/4F.png" alt="" /></a> </li> <li> <a href=""><img src="img/4F.png" alt="" /></a> </li> </ul> </div> <div id="item5" class="item"> <h2>5F 母婴</h2> <ul> <li> <a href=""><img src="img/5F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/5F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/5F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/5F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/5F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/5F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/5F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/5F.jpg" alt="" /></a> </li> <li> <a href=""><img src="img/5F.jpg" alt="" /></a> </li> </ul> </div> </div> </body></html>bootstrap学习笔记(6)
滚动监听
滚动监听有两种方式： (1)通过属性控制向想要滚动监听的元素添加如下属性data-spy="scroll",然后添加data-target属性,该属性可以是导航栏的ID或者是导航栏的class (2)通过脚本控制: $("滚动监听的元素").scrollspy({target:'导航栏的ID或者Class'}) 可以使用.refresh更新dom元素使用方法：$("被更新元素").scrollspy('refresh')；滚动监听时可以添加被激活时执行的事件使用方法:$("被监听项目").on("active.bs.scrollspy",function(){执行的代码}) 补充:如果想实现锚点平滑跳转,可以增加以下代码：<script type="text/javascript"> $("a").click(function () { var href = $(this).attr("href"); var pos = $(href).offset().top; $("html,body").animate({ scrollTop: pos }, 500); return false; }); </script>

来自为知笔记(Wiz)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航