锚点定位和动态导航
需求：右侧有导航栏，点击可以跳转到页面指定位置，同时页面滚动到指定的位置，右侧的导航栏也根据位置进行高亮变化。
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")
}
}
}
}
我欲乘风归去11111
又恐琼楼玉宇22222
此事古难全33333
对影人三人44444
但愿人长久55555
千里共婵娟66666
发表评论 (审核通过后显示评论)：