在滚动上添加活动类适用于每个<li>,除了一个

时间:2018-12-06 21:19:45

标签: javascript jquery

就像标题说的那样。我在顶部有一个导航栏,并提供了一些代码,这些代码负责为它分配活动类。除了一个。一个就是根本不注册任何东西,也不接收该类。

有问题的是#navEx,与之对应的是.js-ex。我已经尝试了各种方法,并且我敢肯定这是一个愚蠢的错误。但是,我花了太多时间试图解决这个问题,现在我只是想解决这个问题。单击时还具有平滑滚动的功能,但我怀疑问题出在哪里。如果证明有必要,我也会在其中进行编辑。

HTML标头:

<header class="header">
            <div class="col-lg-12">
                <div class="header-content">
                    <a class="header-content-logo" href="index.html">PLACEHOLDER</a>
                    <nav class="header-content-navigation" id="smooth-scroll">
                        <ul>
                            <li><a href="top-anchor" id="navHome" class="active">Home</a></li>
                            <li><a href="courses-anchor" id="navCourses">Kursevi</a></li>
                            <li><a href="prof-anchor" id="navProfs">Profesori</a></li>
                            <li><a href="ex-anchor" id="navEx">Ekskurzije</a></li>
                            <li><a href="contact-anchor" id="navContact">Kontakt</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>

HTML部分:

<div class="ex-holder js-ex" id="ex-anchor">
                <section class="section-header">
                    <div class="container">
                        <div class="row center">
                            <div class="col-lg-8 about-text">
                                <h2>Ekskurzije</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
                            </div>
                        </div>
                    </div>
                </section>
              </div>

jQuery代码:

//ANIMATIONS ON SCROLL
    $(document).bind('scroll', function(){

    var scrollOffset = $(document).scrollTop();
        var containerOffsetHome = $('.header').offset().top - window.innerHeight;
    var containerOffsetEx = $('.js-ex').offset().top - window.innerHeight/2;
    var containerOffsetProfs = $('.js-prof').offset().top - window.innerHeight/2;
        var containerOffsetContact = $('.js-contact').offset().top - window.innerHeight/2;
        var containerOffsetCourses = $('.js-courses').offset().top - window.innerHeight/2;

        if (scrollOffset > containerOffsetHome) {
            $('.header-content-navigation ul li a').removeClass('active');
            $('#navHome').addClass('active');
        }

        if (scrollOffset > containerOffsetCourses) {
            var i = 1;
            $('.course-anim').each(function(){
                var self = $(this);
                setTimeout(function(){
                    self.addClass('js-go-side');
                }, i*280);
                i++;
            });
            $('.header-content-navigation ul li a').removeClass('active');
            $('#navCourses').addClass('active');
        }

        if (scrollOffset > containerOffsetEx) {
            $('.header-content-navigation ul li a').removeClass('active');
            $('#navEx').addClass('active');
    }

        if (scrollOffset > containerOffsetProfs) {
      var i = 1;
      $('.prof-box').each(function(){
        var self = $(this);
        setTimeout(function(){
            self.addClass('js-go');
        }, i*500);
        i++;
      });
            $('.header-content-navigation ul li a').removeClass('active');
            $('#navProfs').addClass('active');
    }

        if (scrollOffset > containerOffsetContact) {
            $('.header-content-navigation ul li a').removeClass('active');
            $('#navContact').addClass('active');
        }
 });

0 个答案:

没有答案