服饰
美妆
手机
家电
数码
运动
居家
母婴
食品
图书
服务
* {
margin:0;
padding:0;
}
#menu {
position:fixed;
top:25%;
left:40px;
width:30px;
border:1px solid;
}
#menu ul li {
position:relative;
width:30px;
height:30px;
list-style:none;
text-align:center;
line-height:30px;
font-size:12px;
cursor:pointer;
border-bottom:1px dotted #AAAAAA;
}
#menu ul li.last {
background:#ccc;
color:black;
border-bottom:none;
}
#menu ul li span {
display:none;
width:30px;
height:30px;
position:absolute;
top:0;
left:0;
color:red;
}
#menu ul li:hover span {
display:block;
background:darkred;
color:white;
}
#menu ul li span.active {
display:block;
background:darkred;
color:white;
}
#menu ul li:hover span.active {
display:block;
background:darkred;
color:white;
}
#header,#main,#footer {
margin:auto;
width:1000px;
text-align:center;
font-size:40px;
font-weight:bold;
line-height:500px;
}
#main div {
height:700px;
font-size:50px;
color:honeydew;
line-height:700px;
}
#header {
height:500px;
background:#ccc;
}
#footer {
height:500px;
background:#ccc;
}
里面我写了两种方法,都可以实现一样的效果,其中
var i = Math.floor(($(document).scrollTop() - 500) / 700);
这一句其中的500是头部的高度,700是每个DIV的高度。
方法一里面基本都有注释了,有什么不懂的在问吧