2024年12月27日 建站教程
var htmlTop = 0;
//获取右侧div高度，小编这里需要+300
var box1 = $('#main-box-1').offset().top + 300;
var box2 = $('#main-box-2').offset().top + 300;
var box3 = $('#main-box-3').offset().top + 300;
var box4 = $('#main-box-4').offset().top + 300;
//点击左边li菜单右边滑动到指定位置
$('.main-l li').click(function() {
let index = $(this).index();
if (index == 0) {
$('html, body').animate({
scrollTop: 0
}, 500)
} else if (index == 1) {
$('html, body').animate({
scrollTop: box1
}, 500)
} else if (index == 2) {
$('html, body').animate({
scrollTop: box2
}, 500)
} else if (index == 3) {
$('html, body').animate({
scrollTop: box3
}, 500)
} else if (index == 4) {
$('html, body').animate({
scrollTop: box4
}, 500)
}
})
//点击后删除原先li样式新增当前li样式
$(window).scroll(function(e){
htmlTop = $(window).scrollTop();
if(htmlTop == 0){
$(".main-l li").eq(0).addClass("active").siblings().removeClass("active");
}else if(htmlTop >= box1 && htmlTop < box2){
$(".main-l li").eq(1).addClass("active").siblings().removeClass("active");
}else if(htmlTop >= box2 && htmlTop < box3){
$(".main-l li").eq(2).addClass("active").siblings().removeClass("active");
}else if(htmlTop >= box3 && htmlTop < box4){
$(".main-l li").eq(3).addClass("active").siblings().removeClass("active");
}else if(htmlTop >= box4){
$(".main-l li").eq(4).addClass("active").siblings().removeClass("active");
}
});
本文链接：http://so.lmcjl.com/news/20240/