代码片段 1
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="gb2312" />
- <title > 网页导航特效 </title>
- <style type="text/CSS">
- *{margin:0; padding:0;}
- body{font-size:12px; font-family:"微软雅黑","宋体";}
- a{color:#666; text-decoration:none;}
- ul,li{list-style:none;}
- #content{width:990px; margin:0 auto;}
- #content h1{height:40px; font-size:20px; line-height:40px; padding-left:20px;}
- .item{width:970px; height:600px; margin:10px auto 0; border:1px solid #FFCC99;}
- .item h2{height:34px; line-height:34px; font-size:16px; padding-left:26px;}
- .item ul{width:100%;}
- .item li{width:300px; height:250px; float:left; border:1px solid #9999FF; margin:10px 0 0 10px; line-height:250px; text-align:center;}
- #menu{position:fixed; left:50%; margin-left:495px; top:250px;}
- #menu ul{border:1px solid #FF9966;}
- #menu li a{display:block; width:60px; height:30px; border-bottom:1px solid #FF9966; line-height:30px; text-align:center;}
- #menu li a.hover,#menu li a:hover{ background:#0066FF; color:#fff;}
- </style>
- </head>
- <body>
- <div id="menu">
- <ul>
- <li><a href="#item1" class="hover">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="#"> 男装 </a></li>
- <li><a href="#"> 男装 </a></li>
- <li><a href="#"> 男装 </a></li>
- <li><a href="#"> 男装 </a></li>
- <li><a href="#"> 男装 </a></li>
- <li><a href="#"> 男装 </a></li>
- </ul>
- </div>
- <div id="item2" class="item">
- <h2>2F 女装 </h2>
- <ul>
- <li><a href="#"> 女装 </a></li>
- <li><a href="#"> 女装 </a></li>
- <li><a href="#"> 女装 </a></li>
- <li><a href="#"> 女装 </a></li>
- <li><a href="#"> 女装 </a></li>
- <li><a href="#"> 女装 </a></li>
- </ul>
- </div>
- <div id="item3" class="item">
- <h2>3F 美妆 </h2>
- <ul>
- <li><a href="#"> 美妆 </a></li>
- <li><a href="#"> 美妆 </a></li>
- <li><a href="#"> 美妆 </a></li>
- <li><a href="#"> 美妆 </a></li>
- <li><a href="#"> 美妆 </a></li>
- <li><a href="#"> 美妆 </a></li>
- </ul>
- </div>
- <div id="item4" class="item">
- <h2>4F 母婴 </h2>
- <ul>
- <li><a href="#"> 母婴 </a></li>
- <li><a href="#"> 母婴 </a></li>
- <li><a href="#"> 母婴 </a></li>
- <li><a href="#"> 母婴 </a></li>
- <li><a href="#"> 母婴 </a></li>
- <li><a href="#"> 母婴 </a></li>
- </ul>
- </div>
- <div id="item5" class="item">
- <h2>5F 数码 </h2>
- <ul>
- <li><a href="#"> 数码 </a></li>
- <li><a href="#"> 数码 </a></li>
- <li><a href="#"> 数码 </a></li>
- <li><a href="#"> 数码 </a></li>
- <li><a href="#"> 数码 </a></li>
- <li><a href="#"> 数码 </a></li>
- </ul>
- </div>
- </div>
- <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
- <script type="text/javascript">
- $(function(){
- $(window).scroll(function(){
- var menu = $("#menu");// 保存 menu 节点
- var items = $("#content").find(".item");// 保存 item 数组
- var cId = "";// 保存 item id
- var top = $(document).scrollTop();// 得到滚动条距离文档顶端的距离
- items.each(function(){
- var cItem = $(this);// 得到每一个当前 item
- var cTop = cItem.offset().top;// 得到每一个当前 item 距离文档顶部的高度
- if(top>cTop-200){
- cId = "#"+cItem.attr("id");// 得到当前楼层的 id, 然后再把这个 id 值同的导航项添加 class .hover
- }else{
- return false;
- }
- });
- var cAnchor = menu.find(".hover");// 获得导航条中 class=hover 的标签
- if(cId && cAnchor.attr("href") != cId ){// 如果当前 id 不为空也不等于导航条中的. hover 的 a 的 href 值相同, 改变
- cAnchor.removeClass("hover");
- menu.find("[href="+cId+"]").addClass("hover");
- }
- });
- });
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/note/13034/f61aad69fd868eee98d6991fa523c6aa.html