<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');}}});

$(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);});