我最近在做我们公司官网的改版，产品中心就是每次滚一屏的，我觉得加上楼梯更方便用户浏览，就随便写了个demo，
先来看看结构，都很简单的
<!--楼梯-->
<ul class="louti">
<li class="active">第1屏</li>
<li>第2屏</li>
<li>第3屏</li>
<li>第4屏</li>
<li>第5屏</li>
</ul>
<!--内容-->
<div class="content">
<div style="background-color: #87CEFB" class="ping staircase">
<div>这是第1屏</div>
</div>
<div style="background-color: #FFC0CB" class="ping staircase">
<div>这是第2屏</div>
/div>
<div style="background-color:#BAD5FF" class="ping staircase">
<div>这是第3屏</div>
</div>
<div style="background-color: #3CB379" class="ping staircase">
<div>这是第4屏</div>
</div>
<div style="background-color: #AFEEEE" class="ping staircase">
<div>这是第5屏</div>
</div>
</div>
再来点简单的CSS
html,body {
height: 100%;
}
body {
margin: 0;
}
.content{height: 100%;}
.content .ping {
height: 100%;
}
li{
list-style: none;
}
.louti{
position: fixed;
top: 25%;
right: 3%;
}
.louti li{
width: 100px;
text-align: center;
border: 1px solid #F5F5F5;
height: 80px;
line-height: 80px;
cursor: pointer;
}
.louti li:nth-child(n+2){
border-top: none;
}
.louti li.active{
background: burlywood;
color: white;
}
接下俩就是JS了，
//内容一屏一屏的滚动
document.addEventListener("DOMContentLoaded", function() {
var body = document.body;
var html = document.documentElement;
var itv, height = document.body.offsetHeight;
var page = scrollTop() / height | 0;
addEventListener("resize", onresize, false);
onresize(); //鼠标滚轮事件
document.body.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) {
clearTimeout(itv);
itv = setTimeout(function() {
//判断滚轮滚的方向
var delta = e.wheelDelta / 120 || -e.deltaY / 3;
page -= delta;
var max = (document.body.scrollHeight / height | 0) - 1;
if(page < 0) {
return page = 0;
}
if(page > max) {
return page = max;
}
move();
}, 100);
e.preventDefault();
});
//当窗体发生变化时还是保证每次滚动滚一屏
function onresize() {
height = body.offsetHeight;
move();
}; function move() {
var value = height * page;
var diff = scrollTop() - value;
(function callee() {
diff = diff / 1.2 | 0;
scrollTop(value + diff);
if(diff) {
itv = setTimeout(callee, 16);
}
})();
}; function scrollTop(v) {
if(v == null) {
return Math.max(body.scrollTop, html.scrollTop);
} else {
body.scrollTop = html.scrollTop = v;
}
}
}) //点击楼层按钮跳到相应的楼层
var isMove=false;
//点击右侧导航条
$(".louti li").on("click",function(){
isMove=true;
//按钮变化
$(this).removeClass().addClass("active").siblings("li").removeClass("active");
//楼梯移动
var index=$(this).index();
var _topp=$(".staircase").eq(index).offset().top;
$("html,body").stop().animate({scrollTop:_topp},200,function(){
isMove=false;
})
})
//楼梯滚动导航条相对移动
$(window).scroll(function(){
//判断是否在滚动，如果没有，则支执行这里的代码
if(!isMove){
//获取滚动距离
var _scrollTop=$(document).scrollTop();
//遍历所有楼梯
$(".staircase").each(function(){
var _topp=$(this).offset().top; //判断滚动距离是否大于楼梯的top值
if(_scrollTop>=_topp){
var index=$(this).index();
$(".louti li").eq(index).removeClass().addClass("active")
.siblings("li").removeClass("active"); }
})
}
})