页内导航跳楼事件
Posted bonly-ge
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页内导航跳楼事件相关的知识，希望对你有一定的参考价值。
目的：使用侧边栏实现业内导航。
思路：一种是通过a标签链接的方式，一种是通过jQuery通过控制滚动条的scrollTop值来进行控制。这里重点介绍JQuery的方式，先写静态页面，然后在通过规律写出jQuery语句。
布局如下（在这之前引用了清除列表样式文件和重置文件）：
<style> div{ width: 1024px; margin: 0 auto; } img{ width: 1024px; height: 768px; display: block; } p{ width: 1024px; height:50px; line-height: 50px; font-size: 30px; color: #ff0033; text-align: center; background: #cccccc; } ul{ width: 100px; height: 200px; background: #999; position: fixed; left:0; top: 50%; } ul li{ color: #fff; font-size: 20px; line-height: 40px; text-align: center; border-bottom: 1px solid #ccc; } ul li:hover{ background: #666; font-size:25px; color: #3333ff; } </style> </head> <body> <div> <p id="p1">1号车库</p> <img src="img/1.jpg" > <img src="img/2.jpg" > </div> <div> <p id="p2">2号车库</p> <img src="img/3.jpg" > <img src="img/4.jpg" > </div> <div> <p id="p3">3号车库</p> <img src="img/5.jpg" > <img src="img/6.jpg" > </div> <div> <p id="p4">4号车库</p> <img src="img/7.jpg" > <img src="img/8.jpg" > </div> <div> <p id="p5">5号车库</p> <img src="img/9.jpg" > <img src="img/10.jpg" > </div> <ul> <li>1号车库</li> <li>2号车库</li> <li>3号车库</li> <li>4号车库</li> <li>5号车库</li> </ul> |
jQuery部分如下（在这之前引用了一个jQuery库）：
<script type="text/javascript"> $(window).scroll(function(){ if($(window).scrollTop()<768){ $("ul").hide(); }else{ $("ul").show(); } }); $("ul li").click(function(){ $("html,body").scrollTop($(this).index()*(768*2+50)); }); </script> |
关键点：如何把ul li 和scroll建立联系，第二如何判断什么时候导航条显示，第三通过scroll事件实时获取滚动条的高度。
以上是关于页内导航跳楼事件的主要内容，如果未能解决你的问题，请参考以下文章