楼梯式定位导航系统
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>楼梯式定位导航系统</title>
<style>
*{margin:0;padding:0;}
body,html{height:2000px;}
#daohang{
width:80px;
height:510px;
background-color:#ff00ff;
position:fixed;/*固定定位 把元素固定到浏览器窗口上*/
left:30px;
top:150px;
/*滑动滚动条，导航没移动，固定到浏览器窗口*/
border-radius:5px;/*圆角*/
border:1px solid black;
display:none;/*注意*/
}
#daohang ul li{
list-style:none;
width:60px;
height:40px;
border-bottom:1px solid #ddd;
text-align:center;
color:#666;
font-size:12px;
line-height:40px;
font-family:"微软雅黑";
margin:0 auto;
cursor:pointer;
border-radius:
}
#daohang ul li:hover:{
color:#ff00ff;
}
@font-face{}
.iconfont{
增加margin-right:10px;
margin-left:2px;
}/*增加路径*/
#daohang ul li.active{
background:#f10180;
color:#fff;
}
#head{
width:100%;
height:600px;
background-color:red;
}
#main{
width:1000px;
height:1000px;
background:green;
margin:0 auto;
}
#main{
width:
margin:0 auto;
}
#main ul li{
list-style:none;
width:1000px;
height:800px;
font-size:25px;
font-weight:bold;
}
</style>
</head>
<body>
<!--长方形区域-->
<div id="daohang">
<ul>
<li class="active"><i class="iconfont">3/*修改*/</i>精选</li>
<li><i class="iconfont">/*修改*/</i>女装</li>
<li><i class="iconfont">/*修改*/</i>鞋包</li>
<li><i class="iconfont">/*修改*/</i>男士</li>
<li><i class="iconfont">/*修改*/</i>运动</li>
<li><i class="iconfont">/*修改*/</i>饰品</li>
<li><i class="iconfont">/*修改*/</i>美妆</li>
<li><i class="iconfont">/*修改*/</i>母婴</li>
<li><i class="iconfont">/*修改*/</i>居家</li>
<li><i class="iconfont">/*修改*/</i>国际</li>
<li><i class="iconfont">/*修改*/</i>生活</li>
<li><i class="iconfont">/*修改*/</i>预告</li>
<li>预告</li>
</ul>
</div>
<!--body是浏览器空白处-->
<div id="head">
</div>
<div id="main">
<ul>
<li style="background-color:#ffff00">精选</li>
<li style="background-color:#ffcc00">女装</li>
<li style="background-color:#ff9900">鞋包</li>
<li style="background-color:#ff6600">男士</li>
<li style="background-color:#ff3300">运动</li>
<li style="background-color:#ff0000">饰品</li>
<li style="background-color:#660000">美妆</li>
<li style="background-color:#663300">母婴</li>
<li style="background-color:#3366ff">居家</li>
<li style="background-color:#00cc00">国际</li>
<li style="background-color:#6699ff">生活</li>
<li style="background-color:#993399">预告</li>
</ul>
</div>
</body>
<script src="js/jquery.js"></script>
<script>
k=0;
//jq获取对象
//window是浏览器窗口，滚动浏览器窗口
$("#window").scroll(function(){
if(k==0){
// console.log(1);//打印
var sTop=$(window).scrollTop();//获得滚动条高度
//当滚动到一定高度的时候才显示
if(sTop>600){
$("danhang").fadeIn();//淡入
}else{
$("danhang").fadeout();//淡出
};
//切换
var mainLi=$("#main ul li");
navLi.each(function(){
var _index=$(this).index();
var_height=$(this).offset().top+600;
if(sTop<_height){
$("#daohang ul li").eq(_index).addClass("active");siblings().remove("active");
return false;
};
});
//最开始的时候，滚动高度，肯定是都小于 对应区域到顶部距离
//就看谁最先满足
})//没有条件nav会一个一个跑上去
$("#daohang ul li").click(function(){
k=1;
var _index=$(this).index();//当前下标
$(this).addClass("active");siblings().remove("active");
_height=$("#main ul li").eq(_index).offset().top+600;
$("html,body").animate(scrollTop(_height),500);
k=0;
})
//js没看懂
</script>
</html>
阿里图标
fadeIn,animate区别
hove,mouseput的区别
