锚点定位和动态导航

需求：右侧有导航栏，点击可以跳转到页面指定位置，同时页面滚动到指定的位置，右侧的导航栏也根据位置进行高亮变化。 CSS部分代码 body, html { /* 让页面的跳转是滚动过去的效果，默认属性是auto（立即跳转） */ /* 有兼容性问题，目前ie和苹果手机端浏览器不支持 */ scroll-behavior: smooth; } * { margin: 0; padding: 0; } .left-area { float: left; width: 800px; margin-bottom: 500px; } .section { height: 500px; border-top: 10px solid black; transition: all .5s; } .right-menu { position: fixed; top: 0; left: 800px; } .right-menu-list { display: block; border-top: 100px dashed #ccc; } a { transition: all .5s; } .scrollNow { font-weight: 700; color: red; border-top: 100px solid red; } HTML结构代码 jQury版本代码 var rightMentList = $(".right-menu-list") var leftSection = $(".left-area .section") // 记录左边每个部分卷取值的数组 var leftSectionArr = [] var everySectionTop = '' for (var i = 0; i < leftSection.length; i++) { everySectionTop = leftSection.eq(i).offset().top leftSectionArr.push(everySectionTop) } $(window).scroll(function () { var windowTop = $(this).scrollTop() if (windowTop >= leftSectionArr[1]) { rightMentList.css("font-size", "30px") } else { rightMentList.css("font-size", "16px") } for (var i = 0; i < leftSectionArr.length; i++) { if (windowTop >= leftSectionArr[i]) { rightMentList.eq(i).addClass("scrollNow").siblings().removeClass("scrollNow") } } }) JS版本代码 var rightMenu = my$c("right-menu") var rightMentList = my$c("right-menu").children var leftArea = my$c("left-area") // 记录左边每个部分卷取值的数组 var leftSectionArr = [0, 510, 1020, 1530, 2040, 2550] var getScrollTop window.onscroll = function () { getScrollTop = getScroll().top if (getScrollTop >= leftSectionArr[1]) { rightMenu.style.fontSize = "30px" } else { rightMenu.style.fontSize = "16px" } for (var i = 0; i < leftSectionArr.length; i++) { if (getScrollTop >= leftSectionArr[i]) { rightMentList[i].classList.add("scrollNow") var siblings = getSiblings(rightMentList[i]) for (var j = 0; j < siblings.length; j++) { siblings[j].classList.remove("scrollNow") } } } }