jq导航栏点击滚动到对应位置导航栏随页面滑动变化对应导航颜色

最新推荐文章于 2021-08-27 09:38:14 发布

原创最新推荐文章于 2021-08-27 09:38:14 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何在手机网站中创建导航栏，点击导航项时页面滑动到相应位置，并在页面滚动时改变导航栏的高亮状态。通过jQuery实现点击事件和滚动监听，使得导航栏能够根据页面位置动态更新选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要做个手机站，顶端有导航栏，点击导航栏页面滑到相应位置，并且滑动页面，导航栏也随之变化。由于不大会js，只能网上找了些代码，但是都不完全适用，就自己改造了一番，写的比较粗糙，但是对初学者来说，算是比较好懂

$(function () {

var  cont1 = $("#yswy").offset().top - 100;//获取模块距页面顶部的距离，由于有固定定位的导航栏，所以减100

var  cont2 = $("#ymcz").offset().top - 100;

var cont3 = $("#yyew").offset().top - 100;

var cont4 = $("#lcyy").offset().top - 100;

$KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲but1').click(fu\dots$ (‘html,body’).animate({scrollTop:$(’#yswy’).offset().top - 91}, 400);});//点击滑动到模块位置由于有导航栏减91

$KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲but2').click(fu\dots$ (‘html,body’).animate({scrollTop:$(’#ymcz’).offset().top - 91}, 400);});

$KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲but3').click(fu\dots$ (‘html,body’).animate({scrollTop:$(’#yyew’).offset().top - 91}, 400);});

$KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲but4').click(fu\dots$ (‘html,body’).animate({scrollTop:$(’#lcyy’).offset().top - 91}, 400);});

window.onscroll = function(){

 var t = document.documentElement.scrollTop || document.body.scrollTop;  //获取距离页面顶部的距离

 

 if(   t >=  cont1  && t <= cont2)    { //到顶部的距离介于两者之间时

    $("#but1 span").addClass("active");//添加class,改变对应导航栏颜色

 } else {

$("#but1 span").removeClass(“active”);

}

if ( t >= cont2 && t <= cont3) {

$("#but2 span").addClass(“active”);

} else {

$("#but2 span").removeClass(“active”);

}

if ( t >= cont3 && t <= cont4) {

$("#but3 span").addClass(“active”);

} else {

$("#but3 span").removeClass(“active”);

}