首页 > 代码库 > 页内导航跳楼事件

页内导航跳楼事件

2024-09-17 16:06:36   214人阅读

目的：使用侧边栏实现业内导航。

思路：一种是通过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="http://www.mamicode.com/img/1.jpg" >

<img src="http://www.mamicode.com/img/2.jpg" >

</div>

<div>

<p id="p2">2号车库</p>

<img src="http://www.mamicode.com/img/3.jpg" >

<img src="http://www.mamicode.com/img/4.jpg" >

</div>

<div>

<p id="p3">3号车库</p>

<img src="http://www.mamicode.com/img/5.jpg" >

<img src="http://www.mamicode.com/img/6.jpg" >

</div>

<div>

<p id="p4">4号车库</p>

<img src="http://www.mamicode.com/img/7.jpg" >

<img src="http://www.mamicode.com/img/8.jpg" >

</div>

<div>

<p id="p5">5号车库</p>

<img src="http://www.mamicode.com/img/9.jpg" >

<img src="http://www.mamicode.com/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事件实时获取滚动条的高度。

页内导航跳楼事件


联系
我们