javascript - 如何在使用 javascript 滚动到页面时向这些链接添加活动类？

Question

<div class="navbar">


        <nav>
            <ul class="navbar__navdiv" >

            <li><a class="navbar__navdiv--a "  href="#homePage">Home Page</a></li>
            <li><a class="navbar__navdiv--a"  href="#aboutMe" >About Me</a></li>
            <li><a class="navbar__navdiv--a"  href="#services" >Services</a></li>
            <li><a class="navbar__navdiv--a"  href="#projects" >Projects</a></li>
            <li><a class="navbar__navdiv--a"  href="#contactMe" >Contact Me</a></li>
            </ul>
        </nav>
    </div>

标签： javascript

Answer 1

尝试这个

$(document).scroll(function(){
    var thisScroll = $(this).scrollTop();
    var topOfWindow = $(window).scrollTop();

    if (topOfWindow <= $('#homePage').offset().top - 100 ){ 
        $('.navbar__navdiv--a').removeClass("active");
        $('.navbar1').addClass("active");
    } else if (topOfWindow+100 >= $('#homePage').offset().top && topOfWindow+100 < $('#aboutMe').offset().top ){    
        $('.navbar__navdiv--a').removeClass("active");
        $('.navbar2').addClass("active");
    } else if (topOfWindow+100 >= $('#aboutMe').offset().top && topOfWindow+100 < $('#services').offset().top ){    
        $('.navbar__navdiv--a').removeClass("active");
        $('.navbar3').addClass("active");
    } else if (topOfWindow+100 >= $('#services').offset().top && topOfWindow+100 < $('#projects').offset().top ){   
        $('navbar__navdiv--a').removeClass("active");
        $('.navbar4').addClass("active");
    } else if (topOfWindow+100 >= $('#projects').offset().top ){    
        $('.navbar__navdiv--a').removeClass("active");
        $('.navbar5').addClass("active");
    } 
})

    <nav>
        <ul class="navbar__navdiv" >
            <li><a class="navbar__navdiv--a navbar1"  href="#homePage">Home Page</a></li>
            <li><a class="navbar__navdiv--a navbar2"  href="#aboutMe" >About Me</a></li>
            <li><a class="navbar__navdiv--a navbar3"  href="#services" >Services</a></li>
            <li><a class="navbar__navdiv--a navbar4"  href="#projects" >Projects</a></li>
            <li><a class="navbar__navdiv--a navbar5"  href="#contactMe" >Contact Me</a></li>
        </ul>
    </nav>