京东楼层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0}
ul,li{list-style: none}
#box{1000px;margin:0 auto;}
#box>.top{margin-top: 1000px;}
.floor-item{1000px;height: 500px;border:1px dashed #000;margin-bottom: 10px;font-size: 50px;text-align: center;line-height: 300px;font-weight: 900;}
#btn{position: fixed; top:20%;left:20px;display: none;}
#btn>li{50px;height: 50px;background: #ccc;text-align: center;line-height: 60px;border:1px solid #fff;color:#fff;}
#btn .active{background:#f40}
</style>
</head>
<body>
<div );
var iH = $(window).height();
var oitemHeight = oitem.eq(0).height();
$(document).scroll(function(){
var t = $(document).scrollTop();
if(t>800){
oBtn.fadeIn()
}else{
oBtn.fadeOut()
}
oitem.each(function(i){
var oitemTop =oitem.eq(i).offset().top;
/*
千万别去加可视区的高度
因为各个电脑的屏幕分辨率不同容易出现误差
*/
// //方法一
// if(oitemTop<=t && (oitemTop+oitemHeight)>=t){
// aLi.eq(i).addClass('active').siblings().removeClass('active');
// }
//方法二
if(oitemTop - (oitemHeight/2) <=t && (oitemTop+oitemHeight)>=t){
aLi.eq(i).addClass('active').siblings().removeClass('active');
}
// //方法三
// if(100<oitemTop-t&&oitemTop-t<400){
// aLi.eq(i).addClass('active').siblings().removeClass('active');
// }
})
aLi.click(function(){
var index = $(this).index();
var itmeTop =oitem.eq(index).offset().top;
$("html").stop(true).animate({
scrollTop:itmeTop
})
})
})
</script>