一、实现功能:通过滚轮事件,是导航条上的菜单样式与正文相对应
二、效果如下:
三、功能实现
理论:通过比较第i个元素的偏移量与滚轮偏移量,和第i+1个元素的偏移量与滚轮偏移量的大小,判断第i个元素是否为当前被选择元素,是,循环终止
ps:第i个元素的偏移量和第i+1个元素的偏移量在滚轮事件中是相对于父容器的,在其他时候是相对于根容器,不知道为什么
html部分
<body>
<header>把第一个顶上下吧!!!</header>
<!-- 导航条 -->
<div class="page-name-nav">
<ul class="name-nav-ul">
<li class="name-nav-li-1 nav-word-on"><a href="#" class="name-nav-word ">曹操</a></li>
<li class="name-nav-li-2"><a href="#" class="name-nav-word">司马懿</a></li>
<li class="name-nav-li-3"><a href="#" class="name-nav-word">刘备</a></li>
<li class="name-nav-li-4"><a href="#" class="name-nav-word">诸葛亮</a></li>
<li class="name-nav-li-5"><a href="#" class="name-nav-word">孙权</a></li>
<li class="name-nav-li-6"><a href="#" class="name-nav-word">周瑜</a></li>
</ul>
</div>
<!-- 正文 -->
<div class="introduce-nav">
<ul class="introduce-nav-ul">
<li class="introduce-nav-li-1">大量文字以便形成滚轮事件,下同</li>
<li class="introduce-nav-li-2"></li>
<li class="introduce-nav-li-3"></li>
<li class="introduce-nav-li-4"></li>
<li class="introduce-nav-li-5"></li>
<li class="introduce-nav-li-6"></li>
</ul>
</div>
<footer >把最后一个顶上去吧!!!</footer>
</body>
js部分
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
$(function(){
// 测试$("#id").offset().top
// var hhh = $(".introduce-nav-li-1").offset().top;
// alert(hhh);
$(window).scroll(function () {
var $nav = $(".introduce-nav ul li"),
length = $nav.length,//获取导航菜单 ul li 的个数
item = new Array(),//新建一个数组
sTop = $(window).scrollTop();//获取滚动条偏移的高度
for ( i = 1; i <= length; i++) {
item[i]=$(".introduce-nav-li-"+i).offset().top;//相对父元素偏移的高度
if($(".introduce-nav-li-"+(i+1)).offset()){//是否最后一个元素
item[i+1]=$(".introduce-nav-li-"+(i+1)).offset().top;
if(item[i+1] >sTop&&sTop>=item[i] ){//是否在第i个元素与第i+1个元素之间
// 第i个元素添加被选择样式,其他同级元素移除被选择样式
$(".name-nav-li-"+i).addClass("nav-word-on").siblings("li").removeClass("nav-word-on");
break;
}
else if(sTop<item[i] ){//在第一个元素之上
$(".name-nav-li-"+i).parent().children("li").removeClass("nav-word-on");
break;
}
}
else{
if(sTop>(item[i] +$(".introduce-nav-li-"+i).height())){//在最后一个元素之下
$(".name-nav-li-"+i).parent().children("li").removeClass("nav-word-on");
}
else{//最后一个元素
$(".name-nav-li-"+i).addClass("nav-word-on").siblings("li").removeClass("nav-word-on");
}
}
}
})
})
</script>