スクロール時にnavタグの色を変更します

Question

スクロールダウン時にnavの<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を変更しました）。 activeSectionがあなたのアンカータグの要素を選択しているので

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'); 
    } 
    }); 
} 

はまた、あなただけのその要素に直接クラスを追加する必要があります。

はこれのnav要素に適用selectedクラスを取得する必要があり、あなたはあなたのCSSのセレクタと、より具体的にする必要があります。このことができます

.nav a.selected { 
    color: blue 
} 

希望を！