jquery 滚动时更改导航标签的颜色

kq0g1dla 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(111)

我想在向下滚动时更改导航的<a>元素的颜色。
这里的例子是我把原始的jquery代码https://codyhouse.co/gem/vertical-fixed-navigation/
我为我的项目更改了这段代码，但它不工作，这是怎么回事？

var contentSections = $('.section');
var navigationItems = $('.nav a');

updateNavigation();
$(window).on('scroll', function(){
    updateNavigation();
});

function updateNavigation() {
    contentSections.each(function(){
        $this = $(this);
        var activeSection = $('.nav a[href="#'+$this.attr("class")+'"]');
        if ( ( $this.offset().top - $(window).height()/2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop() ) ) {
            navigationItems.eq(activeSection).addClass('selected');
        }else {
            navigationItems.eq(activeSection).removeClass('selected');
        }
    });
}

jquery

来源：https://stackoverflow.com/questions/39643415/change-the-color-of-the-nav-tag-when-scroll

1条答案

按热度按时间

zf2sa74q1#

下面是一个codepen：http://codepen.io/esten/pen/GjAxRX
有几个问题。您的activeSection选择器返回该元素上的所有类名，而不仅仅是您想要的节标识符。我更改了选择器，以查找.attr('id')而不是class（我必须向portfolio部分添加一个ID，并更改了portfolio头部的ID以适应此情况）。

var contentSections = $('.section');
var navigationItems = $('.nav a');

updateNavigation();
$(window).on('scroll', function() {
  updateNavigation();
});

function updateNavigation() {

  contentSections.each(function() {
    //console.log($(this));
    $this = $(this);
    var activeSection = $('.nav a[href="#' + $this.attr("id") + '"]');

    if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height($(window).height() / 2 >     $(window).scrollTop())) {
      activeSection.addClass('selected');
    } else {
      activeSection.removeClass('selected');
    }
  });
}

另外，由于activeSection选择了锚标记元素，因此您只需要将类直接添加到该元素。
这应该会将selected类应用于nav元素，然后你需要更具体地使用CSS选择器：

.nav a.selected {
  color: blue
}

希望这对你有帮助！

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 滚动时更改导航标签的颜色

1条答案

相关问题

热门标签

最新问答