Jquery干扰滚动主动导航丸

时间:2016-01-12 09:07:16

标签: jquery html css

我有以下Jquery:

//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');
    }
});

我在标题中有三个导航丸:Home,Resume和Contact。当我滚动到网页的某个部分时,相应的药丸将变为“活动”,因此变为白色字体。但是,使用此代码,导航丸的默认蓝色背景出现。我在CSS中所做的一切都没有改变它。

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>

CSS:

#home:hover, #resume:hover, #contact:hover,
#home:focus, #resume:focus, #contact:focus,
#home:active, #resume:active, #contact:active {
    background-color: #536872;
    color: #FFFFFF;
}

.active {
    background-color: #536872;
    color: #FFFFFF;
}

为什么背景颜色不会改变?无论如何,它仍然是默认的蓝色。它与Jquery有关吗? (一旦我取出Jquery,它按预期工作。奇怪。)

0 个答案:

没有答案