<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.somecontent {
width: 1000px;
height: 1232px;
margin: 0 auto;
background-color: #ccc;
}
.floor {
width: 1000px;
margin: 0 auto;
height: 400px;
background: yellowgreen;
margin-bottom: 10px;
}
.f1 {
height: 433px;
}
.f2 {
height: 352px;
}
.leftNav {
position: fixed;
bottom: 110px;
left: 10px;
width: 60px;
}
.leftNav ul {
list-style: none;
}
.leftNav ul li {
width: 60px;
height: 60px;
background-color: #ccc;
}
.leftNav ul li a {
display: block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
text-decoration: none;
font-size: 14px;
}
.leftNav ul li a.number {
display: block;
}
.leftNav ul li a.chinese {
display: none;
color: white;
}
.leftNav ul li.cur a.number {
display: none;
}
.leftNav ul li.cur a.chinese {
display: block;
}
.leftNav ul li.cur {
background-color: rgb(111, 0, 0);
}
</style>
</head>
<body>
<div class="somecontent"></div>
<div class="leftNav" id="leftNav">
<ul>
<li>
<a href="javascript:;" class="number">1F</a>
<a href="javascript:;" class="chinese">百货</a>
</li>
<li>
<a href="javascript:;" class="number">2F</a>
<a href="javascript:;" class="chinese">男装</a>
</li>
<li>
<a href="javascript:;" class="number">3F</a>
<a href="javascript:;" class="chinese">女装</a>
</li>
<li>
<a href="javascript:;" class="number">4F</a>
<a href="javascript:;" class="chinese">裤子</a>
</li>
<li>
<a href="javascript:;" class="number">5F</a>
<a href="javascript:;" class="chinese">童装</a>
</li>
<li>
<a href="javascript:;" class="number">6F</a>
<a href="javascript:;" class="chinese">运动</a>
</li>
<li>
<a href="javascript:;" class="number">7F</a>
<a href="javascript:;" class="chinese">电子</a>
</li>
</ul>
</div>
<div class="floor f1"></div>
<div class="floor f2"></div>
<div class="floor f3"></div>
<div class="floor f4"></div>
<div class="floor f5"></div>
<div class="floor f6"></div>
<div class="floor f7"></div>
<div class="somecontent"></div>
<script>
// 获取DOM元素
var leftBtnList = document.getElementById('leftNav').getElementsByTagName('li');
// 声明楼层数组，楼层高度数组
var floorArr = [];
var floorOffsetTopArr = [];
// 将所有楼层与楼层高度添加进数组
for (var i = 0; i < document.body.childNodes.length; i++) {
if (document.body.childNodes[i].nodeType == '1' && document.body.childNodes[i].className.indexOf('floor') != -1) {
floorArr.push(document.body.childNodes[i]);
floorOffsetTopArr.push(document.body.childNodes[i].offsetTop);
}
}
// 声明当前楼层,初始没有进入任何楼层
var nowFlool = NaN;
// 数组超标给楼层高度数组添加一个假楼层高度
floorOffsetTopArr.push(floorOffsetTopArr[floorOffsetTopArr.length - 1] + floorArr[floorArr.length - 1].clientHeight);
// 添加滚动监听
window.onscroll = function() {
// 获取当前卷去位置
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 判读是否进入当前楼层
for (var i = 0; i < floorOffsetTopArr.length; i++) {
if (scrollTop >= floorOffsetTopArr[i] - 200 && scrollTop < floorOffsetTopArr[i + 1] - 200) {
// 如果在当前楼层不执行DOM操作
if (nowFlool != i) {
// 如果是原楼层不存在则不执行DOM操作
!isNaN(nowFlool) && (leftBtnList[nowFlool].className = "");
nowFlool = i;
// 当前楼层添加
leftBtnList[nowFlool].className = "cur";
}
// 如果进入楼层就退出，如果没有退出就是没有在任何楼层
break;
}
}
console.log(i);
// 不在任何楼层 i == floorOffsetTopArr.length
if (i == floorOffsetTopArr.length) {
!isNaN(nowFlool) && (leftBtnList[nowFlool].className = "");
nowFlool = NaN;
}
}
// 给按钮添加监听
for (var i = 0; i < leftBtnList.length; i++) {
leftBtnList[i].index = i;
leftBtnList[i].onclick = function() {
scrollAnimate(floorOffsetTopArr[this.index], 600)
}
}
// 定义滚动动画
function scrollAnimate(target, time) {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 定义动画间隔
var interval = 10;
// 获取总帧率
var allFrame = time / interval;
// 获取总距离
var distance = target - scrollTop;
// 定义当前帧率
var currentFrame = 0;
// 定时器
var timer = setInterval(function() {
// 设置卷曲值
document.body.scrollTop = document.documentElement.scrollTop = Liear(currentFrame, scrollTop, distance, allFrame);
currentFrame++;
if (currentFrame == allFrame) {
clearInterval(timer)
}
}, interval)
}
// 随便定义一个缓动公式
function Liear(t, b, c, d) {
return t * c / d + b;
}
</script>
</body>
</html>
