Question

我正在尝试更改导航类，同时向下滚动页面的不同部分，但我得到错误。这是我目前的代码：

(function($) {
"use strict";

  $(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,
          menu = target;
      $target = $(target);
      $('html, body').stop().animate({
          'scrollTop': $target.offset().top+2
      }, 500, 'swing', function () {
          window.location.hash = target;
          $(document).on("scroll", onScroll);
      });
  });
});

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

  })(jQuery);

我试图在WordPress主题中使用它。代码布局中是否存在可能导致问题的错误？

提前致谢。

斯科特。

Answer 1

你的意思是sticky nav bar吗？如果是这样的话，我就是这样做的。

https://jsfiddle.net/moongod101/se4a7bm0/

Answer 2

问题可能是您在定义之前使用$target，并启用了严格模式。尝试在声明列表中初始化$target（使用逗号将其添加到列表中）：

(function($) {
"use strict";

  $(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,
          menu = target,
          $target = $(target);
      $('html, body').stop().animate({
          'scrollTop': $target.offset().top+2
      }, 500, 'swing', function () {
          window.location.hash = target;
          $(document).on("scroll", onScroll);
      });
  });
});

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

  })(jQuery);

使用jQuery在页面滚动上更改导航活动类

2 个答案: