をスクロールダウンしようとするたびにスクロールをリセットします。すべてが正常に動作していて、スクロールイベントリスナーが適切に起動します。しかし、いくつかのものを変更した後、それは失敗しているように見えます。スクロールイベントリスナーは、私がこの非常に奇妙なjavascriptの問題に遭遇したので、私が
特に、私がスクロールしようとするたびにすぐにもう一度先頭に戻します。コンソールにエラーはありません。だから私はそれが何らかの構文エラーではないと推測します。私のJSスニペットは次のとおりです。
var header = document.querySelector('.Header');
var content = document.querySelector('.Hero__content');
window.addEventListener('scroll', function() {
console.log("Added listener.");
if (document.body.scrollTop > 300 && !header.classList.contains('Header--fixed')) {
console.log("Scrolled below 300.");
header.classList.add('Header--fixed');
header.classList.remove('Header--inHero');
} else if (document.body.scrollTop = 0 && header.classList.contains('Header--fixed')) {
console.log("Scrolled to top.");
header.classList.remove('Header--fixed');
header.classList.add('Header--inHero');
}
});
私は何が起こっていたかを見るためにいくつかのconsole.log（）ステートメントを追加しました。その結果、ロード時には何も記録されません。スクロールしようとすると、「追加されたリスナー」がログに記録されるので、最初のconsole.log（）がそこにあります。それはスクロールごとに何度もログに記録します（ただし、トラックパッドでスクロールしているため、トリガーされた時間に関係します）。
一般的なクラス変更動作は、そのまま保持されます。十分にスクロールして、300ピクセルのマーカー（document.body.scrollTop> 300）を下回ると、クラスが追加され、他のクラスは削除されます。しかし、もう一度、elseメソッドがトリガーされないとき。
このスクリプトは、HTMLファイルの末尾に、bodyタグの前にあります。それに続いて2つのスクリプトが続きます：
main.jsには、Google Web Starter KitのデフォルトのJSファイルが含まれています。これは、オフラインでのキャッシュ作業を行う自己呼び出し関数です。このファイルは変更されていません。それは全体としてon GitHubとして利用可能です、私はここですべてをコピーする必要はありません。
もう1つはGoogleアナリティクススニペットで、Googleから直接コピーされています。
順序は次のとおりです。Googleからのbodyタグの
- 最終要素
- 私のスニペットインライン使ってスクリプトタグ
- main.jsが
- のGoogle Analyticsが期待
スニペット振る舞いはスクロールする干渉ではなく、適切なクラスの変更であり、実際の動作はすべての試行で奇妙なスクロールのリセットですスクロール
ご迷惑をおかけして申し訳ありません。ありがとう！