<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
i{font-style: normal;}
ul,li,dl,ol{list-style: none;}
#LoutiNav{ border: 1px solid gray; width: 30px; position: fixed; top: 150px; left: 50px; display: none;}
#LoutiNav li{ width: 30px; height: 30px;border-bottom: 1px solid gray; line-height: 30px; text-align: center; cursor: pointer;}
#LoutiNav span{display: none;}
#LoutiNav .active{background: white; color: darkred;}
#LoutiNav li:hover span{display: block; font-size: 12px; background: darkred; color: white;}
#LoutiNav li:hover i{display: none;}
#goTop{width: 40px;height: 40px; line-height: 40px;text-align: center; background: gray; position: fixed;bottom: 30px; right: 30px; cursor: pointer;border-radius: 5px; display: none; }
#goTop:hover{background: darkred; color: white;}
#goTop:hover span{display: block;}
#header{height: 200px; background: palegoldenrod; text-align: center; line-height: 200px; font-size: 72px; margin: 0 auto;}
.louceng{ height: 810px; width: 1440;text-align: center; line-height: 800px; font-size: 120px; margin: 0 auto;}
#erweima{width: 130px; height: 130px; background: palegreen; display: none; position: absolute; right: 46px; bottom: 5px;line-height: 130px; text-align: center; font-size: 20px; border-radius:10px ;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<ul id="LoutiNav">
<li class="active"><i>1F
</i><span>服饰
</span></li>
<li><i>2F
</i><span>美妆
</span></li>
<li><i>3F
</i><span>手机
</span></li>
<li><i>4F
</i><span>家电
</span></li>
<li><i>5F
</i><span>数码
</span></li>
<li><i>6F
</i><span>运动
</span></li>
<li><i>7F
</i><span>居家
</span></li>
<li><i>8F
</i><span>母婴
</span></li>
<li><i>9F
</i><span>食品
</span></li>
<li><i>10F
</i><span>图书
</span></li>
<li style="border-bottom: none;"><i>11F
</i><span>服务
</span></li>
</ul>
<div id="goTop">
<span id="erweima">我是二维码
</span>
Top
</div>
<div id="header">头部
</div>
<div id="main">
<div class="louceng" style="background: papayawhip;">服饰
</div>
<div class="louceng"style="background: peachpuff;">美妆
</div>
<div class="louceng" style="background: peru;">手机
</div>
<div class="louceng" style="background: pink;">家电
</div>
<div class="louceng" style="background: palegoldenrod;">数码
</div>
<div class="louceng" style="background: plum;">运动
</div>
<div class="louceng" style="background: powderblue;">居家
</div>
<div class="louceng" style="background: rosybrown;">母婴
</div>
<div class="louceng" style="background: cornflowerblue">食品
</div>
<div class="louceng" style="background: mediumpurple;">图书
</div>
<div class="louceng" style="background: darkslateblue;">服务
</div>
</div>
<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/2){
aNav.removeClass('active');
aNav.eq($(this).index()).addClass('active');
}
})
}else{
oNav.fadeOut();
oTop.fadeOut();
}
})
oTop.click(function(){
$('body,html').animate({"scrollTop":0},500)
})
aNav.click(function(){
var t = aDiv.eq($(this).index()).offset().top;
$('body,html').animate({"scrollTop":t},500);
$(this).addClass('active').siblings().removeClass('active');
});
</script>
</body>
</html>
转载请注明原文地址: https://www.6miu.com/read-25698.html
