<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../jq寫輪播圖/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
//獲取下標爲0離最上面的高度
var Stop = $('.c').eq(0).offset().top;
//獲取滾動條離上面的高度
var Ntop = $(window).scrollTop();
if(Ntop >= Stop)
{
$('.lou').show();
}
else
{
$('.lou').hide();
}
var Lnum = $('.c').length;
for (var i = 0; i < Lnum - 1; i++)
{
//0號元素距離上面的距離
var Lnum0 = $('.c').eq(i).offset().top;
//0+1號元素距離上面的距離
var Lnum1 = $('.c').eq(i+1).offset().top;
if(Ntop+1 >= Lnum0 && Ntop < Lnum1)
{
console.log(i);
$('.lou ul li').eq(i).find('a').addClass('active');
$('.lou ul li').eq(i).siblings('li').find('a').removeClass('active');
}
else if($('.c').eq(9).offset().top <=Ntop)
{
$('.lou ul li a').eq(9).addClass('active');
$('.lou ul li').eq(9).siblings('li').find('a').removeClass('active');
}
}
})
$('.lou ul li').click(function(){
var num = $(this).index();
var t = $('.c').eq(num).offset().top;
$('body').stop().animate({'scrollTop':t},200)
})
})
</script>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
font-size: 12px;
}
.centent{
width: 1000px;
height: auto;
border: 1px solid red;
margin: 0 auto;
}
.top{
width: 1000px;
height: 600px;
background: pink;
}
.c{
width: 1000px;
height: 300px;
background: seagreen;
border-bottom: 1px solid white;
}
.lou{
position: fixed;
top: 10px;
left: 50px;
width: 50px;
height: auto;
display: none;
}
.lou ul li{
width: 100%;
height: 50px;
background: #918888;
border-bottom: 1px solid white;
}
.lou ul li a{
display: block;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
}
.active{
background: #D70B1C;
}
.lou ul li:hover{
background: #D70B1C;
}
</style>
</head>
<body>
<div class="lou">
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
<li><a href="javascript:;">6</a></li>
<li><a href="javascript:;">7</a></li>
<li><a href="javascript:;">8</a></li>
<li><a href="javascript:;">9</a></li>
<li><a href="javascript:;">10</a></li>
<li><a href="#tips">Top</a></li>
</ul>
</div>
<div class="centent">
<div class="top" id='tips'>
top
</div>
<div class="c">
1
</div>
<div class="c">
2
</div>
<div class="c">
3
</div>
<div class="c">
4
</div>
<div class="c">
5
</div>
<div class="c">
6
</div>
<div class="c">
7
</div>
<div class="c">
8
</div>
<div class="c">
9
</div>
<div class="c">
10
</div>
<!--<div class="c">
11
</div>-->
<div class="top">
bottom
</div>
</div>
</body>
</html>
JQ樓層效果 需改良左右兩邊定位問題
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Using JQuery to manipulate HTML label
Two ways manipulating HTML label using JQuery: 1. $("Label_Name"); 2. $('#Label_Id_Name');
jQuery HashTable
jQuery.Hashtable = function() { 02 this.items = new Array(); 03 this.itemsCount = 0; 04 this