変更するスタイルこの例に示されているのと同じように、別のアンカーに

Question

https://blackrockdigital.github.io/startbootstrap-freelancer/

を移動するとき、私は、各アンカーに移動すると、各メニューテキストの背景色を与えたいです。私はブートストラップなしで、通常のjavascriptのみでこれを好む。

私の考えは、スクロール位置がセクションのoffsetTopの位置にある要素に背景色のスタイルを持つクラスを追加します

function changeColor() { 
    if (window.scrollY == sectionClass.offsetTop) { 
    document.querySelector('.sectionClass').classList.add("newColorClass"); 
} else { 
    document.querySelector('.sectionClass').classList.remove("newColorClass"); 
    } 
} 

のように見える機能を追加しました。

しかし、これは意図したとおりに動作していないようです。

Answer 1

これらはクラスです。アンカーではありません。 アンカーを検出したい場合は＃にする必要があります。

さらに重要なことに、sectionClass.offsetTopは、sectionClassはどこでも変数として定義されていますか？これは「各クラス」のために動作しません、

window.scrollY == document.querySelector('.sectionClass').offsetTop

注意してみてください、それはおそらく唯一の最初の1のために動作します。各クエリーセレクタに対してループを作成する必要があります