<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div,body{
padding: 0;
margin: 0;
}
.header{
100%;
height: 1000px;
background: palegoldenrod;
}
.page{
100%;
height:300px;
}
div{
text-align: center;
line-height: 300px;
font-size: 50px;
}
.page:nth-child(2n){
background: red;
}
.page:nth-child(2n+1){
background: yellowgreen;
}
.footer{
100%;
height:500px;
background: palevioletred;
}
ul li{
list-style: none;
80px;
height:40px;
border:1px solid #666;
background: greenyellow;
text-align: center;
line-height: 40px;
}
ul{
position: fixed;
top:30%;
left:2%;
z-index: 1654;
display: none;
}
.ul .current{
background: white;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="page">1</div>
<div class="page">2</div>
<div class="page">3</div>
<div class="page">4</div>
<div class="page">5</div>
<div class="page">6</div>
<div class="footer">ding</div>
<ul class="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>ding</li>
</ul>
</body>
<script src="modules/jquery.min.js"></script>
<script>
$(function(){
$('li:last').on('click',function(){//点击ding回顶部
$('html,body').animate({scrollTop:0},200);
});
var $header_h = $('.header').outerHeight();//获取头部的外部高度
/*console.log($header_h);*/
$(window).on('scroll',function(){
var $h = $(window).scrollTop();//获取滚动条当前的值
console.log($h);
if ($h >= $header_h) {//如果当前滚动条的位置大于或等于头部的高度
$('.ul').fadeIn();//那么ul淡入
} else {
$('.ul').fadeOut();//否则ul淡出
}
$switch($h);
});
$('.ul>li').on('click', function () {//给ul下面的每个li添加点击事件
var $index = $(this).index();//设置一个$index变量并且把当前点击的li的下标值付给它
var $section=$current_top($index);
console.log($section)
$('html,body').animate({//浏览器视口的相对滚动条顶部的偏移的动画效果
scrollTop: $section
}, 200);
});
})
function $current_top($index){
//设置一个变量$section并把点击一个li后当前一个section的滚动条偏移后的位置的值付给它
var $section = $('.page').eq($index).offset().top-300;
//给当前点击的li赋予类名current，并且移除与他同辈元素siblings()li的类名；
$('.ul>li').eq($index).addClass('current').siblings().removeClass('current');
return $section;
}
function $switch($h){
switch (true) {
case $h >= $current_top(5):
break;
case $h >= $current_top(4):
break;
case $h >= $current_top(3):
break;
case $h >= $current_top(2):
break;
case $h >= $current_top(1):
break;
case $h >= $current_top(0):
break;
}
}
</script>
</html>