服饰
美妆
手机
家电
数码
运动
居家
母婴
食品
图书
服务
* { 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的高度。
方法一里面基本都有注释了,有什么不懂的在问吧