Question

我想在向下滚动时更改导航的<a>元素的颜色。

我的回购https://github.com/sebalaini/Twelfth_Project_Treehouse.com 这里是我采用原始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');
        }
    });
}

Answer 1

这是一个codepen：http://codepen.io/esten/pen/GjAxRX

有一些问题。您的activeSection选择器返回该元素上的所有类名，而不仅仅是您想要的节标识符。我更改了那个选择器以查找.attr('id')而不是类（我必须在项目组合部分添加一个ID，并且我更改了组合标题的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
}

希望这有帮助！

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

1 个答案: