其实这种效果网上好多的插件，但是我想自己实现看看，其实把思路理清实现起来就非常简单了，让我们看看：
分析：
从图中我们可以看出：右边的top=100px，那么它应该在第一个框的top+height=150px区域内，
当鼠标滚动到第2个区域时，同理，右边的top，应该在第2个框的top+height内 ，这样思路理清了，那么接下来我们来实现吧。
<nav class="sidebar">
<ul>
<li>F1-植物王国</li>
<li>F2-动物世界</li>
<li>F3-科学探秘</li>
<li>F4-文化节日</li>
<li>F5-成长健康</li>
<li>F6-生活百科</li>
<li>F7-艺术欣赏</li>
<li>F8-语言乐园</li>
<li>F9-数学小天地</li>
</ul>
</nav>
/*侧边栏开始*/
.sidebar {
border: 1px solid #E5E9EF;
position: fixed;
width: 100px;
right: 12%;
top: 45%;
border-radius: 4px;
}
.sidebar>ul {
}
.sidebar>ul>li {
padding: 10px;
width: 100px;
cursor: pointer;
}
.sidebar .active {
background-color: #06A3D7;
color: #fff;
}
/*侧边栏结束*/
$(window).scroll(function() {
//这里是要显示的div的id，一定要按照从上到下的顺序排列，如果有新的可以往后加
var tops = [ 'f1', 'f2', 'f3', 'f4' ];
for (var i = 0; i < tops.length; i++) {
var top = $('.sidebar ul li').eq(i).offset().top;
var t = $('#' + tops[i]).offset().top;
var h = $('#' + tops[i]).height();
if (top > t && top < t + h) {
$('.sidebar ul li').removeClass('active');
$('.sidebar ul li').eq(i).addClass('active');
}
if (top < t && i == 0) {
$('.sidebar ul li').removeClass('active');
}
}
});
效果图：
总结：
1、刚开始做的时候没有思绪，然后一个朋友给了一段自己写的代码，我就参考一下然后自己优化了一下它的代码
2、默认在页面最上面应该不显示active状态，所以第2个if判断至关重要！！！
参考：
http://www.bootcss.com/p/stickup/
===========================================分割线=========================================================
上面是依据sidebar来判断div的，也就是说当div和sidebar同处同一水平线，那么导航就高亮，现在我参照bilibili的网站，它的是当div在屏幕可见区域1/4位置时导航就高亮，所以代码改成：
$(document).on('scroll', function() {
var height = $(window).height();
var tops = [ 'f1', 'f2', 'f3', 'f4' ];
for (var i = 0; i < tops.length; i++) {
var rectop = $('#' + tops[i])[0].getBoundingClientRect().top;
console.log('rectop=' + rectop)
if (rectop < height /4) {
$('.sidebar ul li').removeClass('active');
$('.sidebar ul li').eq(i).addClass('active');
} else if (i == 0) {
$('.sidebar ul li').removeClass('active');
}
}
});
$(".sidebar ul li").click(function(e) {
var index = $(this).index();
var height = $(window).height();
$("html,body").animate({
scrollTop : $('#f' + (parseInt(index) + 1)).offset().top
}, 500);
});
$(".sidebar a").click(function(e) {
$("html,body").animate({
scrollTop : $('body').offset().top
}, 500);
});
总结：这样虽然完成了，但是最后一个div如果没有达到屏幕可见区域的1/4位置，那么导航就不高亮，bilibili的做法是，直接去掉最后一个导航，而我的做法是最后div的margin-bottom设置成200px，那就会“撑”到1/4位置了。
参考：http://www.bilibili.com/
