Question

我是Javascript的新手，并且无法在此主题中听到答案：Change navigation active class on window scroll

我使用导航栏的类编辑了jsFiddle示例，并使其工作，但是当我尝试将脚本带到我的实际网站时，它不再起作用了。也许它与“currLink”变量有关？我看到在示例中他们在链接上使用了“active”类，但在我的站点（基于Bootstrap）中，活动类被添加到列表项标记中。

无论如何，我一直无法让它工作，我想知道我是否忽视了一些明显的东西。

以下是导航栏的HTML：

<div id="navigation-bar" class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#top">home</a></li>
      <li><a href="#philosophy">philosophy</a></li>
      <li><a href="#yoga_works">yoga works</a></li>
      <li><a href="#signup">start your journey</a></li>
      <li><a href="#careers">careers</a></li>
      <li><a href="#contact">contact</a></li>
    </ul>
</div>

我试图使用的Javascript：

<script type='text/javascript'>/ 
  $(window).load(function(){
  $(document).ready(function () {
      $(document).on("scroll", onScroll);

      //smoothscroll
      $('a[href^="#"]').on('click', function (e) {
          e.preventDefault();
          $(document).off("scroll");

          $('a').each(function () {
              $(this).removeClass('active');
          })
          $(this).addClass('active');

          var target = this.hash,
              wrap = target;
          $target = $(target);
          $('html, body').stop().animate({
              'scrollTop': $target.offset().top
          }, 500, 'swing', function () {
              window.location.hash = target;
              $(document).on("scroll", onScroll);
          });
      });
  });

  function onScroll(event){
      var scrollPos = $(document).scrollTop();
      $('#navigation-bar a').each(function () {
          var currLink = $(this);
          var refElement = $(currLink.attr("href"));
          if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
              currLink.addClass("active");
          }
          else{
              currLink.removeClass("active");
          }
      });
  }
  });

  </script>

显然我需要学习Javascript，所以我可以自己排除这样的基本问题，但与此同时，我需要完成这个项目。非常感谢！

有关在使用Javascript滚动时更改活动导航项的问题

0 个答案: