Question

我几个小时以来一直在研究这个小问题，并且可以真正使用一些帮助。我有三个Bootstrap导航药：

HTML：

<nav class="navbar navbar-fixed-top">
    <div class="container">
        <ul class="nav nav-pills pull-right">
            <li class="home-class"><a href="#home-page" id="home">Home</a></li>     
            <li class="resume-class"><a href="#resume-page" id="resume">Resume</a></li>         
            <li class="contact-class"><a href="#contact-page" id="contact">Contact</a></li>
        </ul>
    </div>
</nav>

当我滚动到网页的某个区域时，它会自动将该导航丸突出显示为白色字体（这在jQuery中处理）。

应该发生的事情是，当我滚动到“恢复”部分时，不应突出显示所有其他药片。但是，当我点击Resume，然后滚动到Contact / Home时，Resume仍然会突出显示 - 看起来像这样：

CSS：

.nav-pills > li > a {
    background-color: transparent;
    color: #a9a9a9;
}

.nav-pills > li.active > a {
    background-color: #536872;
    color: #FFFFFF;
}

jQuery（这是非常不优化的，对不起）：

var home = $('#section1').offset();
var resume = $('#section2').offset();
var contact = $('#section3').offset()

//Change active class when scrolling
$(window).scroll(function() {
    var position = $(document).scrollTop();

    if (position <= home.top - 80) {
        $('.home-class').removeClass('active');
        $('.resume-class').removeClass('active');
        $('.contact-class').removeClass('active');
    }

    if (position >= home.top - 80) {
        $('.home-class').addClass('active');
        $('.resume-class').removeClass('active');
        $('.contact-class').removeClass('active');
    }

    if (position > resume.top - 50) {
        $('.home-class').removeClass('active');
        $('.resume-class').addClass('active');
        $('.contact-class').removeClass('active');
    }

    if (position > contact.top - 50) {
        $('.home-class').removeClass('active');
        $('.resume-class').removeClass('active');
        $('.contact-class').addClass('active');
    }
});

TL; DR - 滚动到网页的某些方面突出显示导航药丸的相应部分，但是当我开始点击药丸然后滚动时，会突出显示多个导航药丸。我的问题是 - 当我点击+滚动时，为什么removeClass('active')没有摆脱.active类？

Answer 1

你被迫使用jQuery吗？ Bootstrap为此提供了一个完全自动化的功能，称为scrollspy。如果你可以使用Bootstrap来看看这个： https://getbootstrap.com/javascript/#scrollspy

此外，这是一个非常明确的如何使用它的例子。 http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

addClass / removeClass与导航丸jQuery

1 个答案: