Question

我已经发布了有关此内容的信息，但似乎找不到解决方法。当用户滚动到该部分时，我试图将类添加到与该部分相关的特定标签中。我在下面尝试了这段代码，链接没有任何反应。

$(window).scroll(function() {
    var position  = $(this).scrollTop;

    $('.section').each(function() {
      var target = $(this).offset().top;
      var id = $(this).attr('id');
      var navLinks = $('#navigation li a');

      if(position >= target) { 
        navLinks.removeClass('current');
        $('#navigation li a[href^="#"' + id + ']').addClass('current');
      }
    });
   });

https://codepen.io/yubind/pen/OoOErZ

Answer 1

在滚动功能内的锚标记选择中以及在获取窗口偏移时，您都有语法错误。使用以下代码

$(window).scroll(function () {
   var position = window.pageYOffset;
   $('.section').each(function () {
     var target = $(this).offset().top;
     var id = $(this).attr('id');
     var navLinks = $('#navigation li a');
     if (position >= target) {
       navLinks.removeClass('current');
       $('#navigation li a[href="#' + id + '"]').addClass('current');
     }
   });
});

另外，您需要将当前的班级颜色设置为重要，以使其正常工作

.current {
  color: red!important;
}

当用户滚动到某个部分时，突出显示导航项

1 个答案: