jQuery电商网站楼层滚动定位
转载于前端网
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF- 八">
<title>jQuery电商网站楼层滑动定位</title>
<style type="text/css">
*{margin: 0;padding: 0;}
i{font-style: normal;}
ul,li,dl,ol{list-style: none;}
#LoutiNav{ border: 一px solid gray; width: 三0px; position: fixed; top: 一 五0px; left: 五0px; display: none;}
#LoutiNav li{ width: 三0px; height: 三0px;border-bottom: 一px solid gray; line-height: 三0px; text-align: center; cursor: pointer;}
#LoutiNav span{display: none;}
#LoutiNav .active{background: white; color: darkred;}
#LoutiNav li:hover span{display: block; font-size: 一 二px; background: darkred; color: white;}
#LoutiNav li:hover i{display: none;}
#goTop{width: 四0px;height: 四0px; line-height: 四0px;text-align: center; background: gray; position: fixed;bottom: 三0px; right: 三0px; cursor: pointer;border-radius: 五px; display: none; }
#goTop:hover{background: darkred; color: white;}
#goTop:hover span{display: block;}
#header{height: 二00px; background: palegoldenrod; text-align: center; line-height: 二00px; font-size: 七 二px; margin: 0 auto;}
.louceng{ height: 八 一0px; width: 一 四 四0;text-align: center; line-height: 八00px; font-size: 一 二0px; margin: 0 auto;}
#erweima{width: 一 三0px; height: 一 三0px; background: palegreen; display: none; position: absolute; right: 四 六px; bottom: 五px;line-height: 一 三0px; text-align: center; font-size: 二0px; border-radius: 一0px ;}
</style>
</head>
<body>
<ul id="LoutiNav" style="display: block;">
<li class="a3e3-ba6c-96e3-906f "><i> 一F</i><span>衣饰 </span></li>
<li><i> 二F</i><span>美妆</span></li>
<li><i> 三F</i><span>脚机</span></li>
<li><i> 四F</i><span>野电</span></li>
<li><i> 五F</i><span>数码</span></li>
<li><i> 六F</i><span>活动 </span></li>
<li><i> 七F</i><span>居野</span></li>
<li><i> 八F</i><span>母婴</span></li>
<li><i> 九F</i><span>食物 </span></li>
<li><i> 一0F</i><span>图书</span></li>
<li style="border-bottom: none;"><i> 一 一F</i><span>办事 </span></li>
</ul>
<div id="goTop" style="display: block;">
<span id="erweima">尔是两维码</span>Top</div>
<div id="header">头部</div>
<div id="main">
<div style="background: papayawhip;">衣饰 </div>
<div style="background: peachpuff;">美妆</div>
<div style="background: peru;">脚机</div>
<div style="background: pink;">野电</div>
<div style="background: palegoldenrod;">数码</div>
<div style="background: plum;">活动 </div>
<div style="background: powderblue;">居野</div>
<div style="background: rosybrown;">母婴</div>
<div style="background: cornflowerblue">食物 </div>
<div style="background: mediumpurple;">图书</div>
<div style="background: darkslateblue;">办事 </div>
</div>
<script src="https://cdn.bootcss.com/jquery/ 三. 三. 一/jquery.min.js"></script>
<script type="text/javascript">
var oNav = $('#LoutiNav');//导航壳
var aNav = oNav.find('li');//导航
var aDiv = $('#main .louceng');//楼层
var oTop = $('#goTop');
//归到顶部
$(window).scroll(function(){
var winH = $(window).height();//否望窗心下度
var iTop = $(window).scrollTop();//鼠标滑动的间隔
if(iTop>=$('#header').height()){
oNav.fadeIn();
oTop.fadeIn();
//鼠标滚动式转变
aDiv.each(function(){
if(winH+iTop - $(this).offset().top>winH/ 二){
aNav.removeClass('active');
aNav.eq($(this).index()).addClass('active');
}
})
}else{
oNav.fadeOut();
oTop.fadeOut();
}
})
//点击top归到顶部
oTop.click(function(){
$('body,html').animate({"scrollTop":0}, 五00)
})
//点击归到当前楼层
aNav.click(function(){
var t = aDiv.eq($(this).index()).offset().top;
$('body,html').animate({"scrollTop":t}, 五00);
$(this).addClass('active').siblings().removeClass('active');
});
</script>
</body>
</html>
