其实这种效果网上好多的插件，但是我想自己实现看看，其实把思路理清实现起来就非常简单了，让我们看看：
分析：
从图中我们可以看出：右边的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位置了。
