JQueryを使わないでスクロール位置でdivスタイルを変更する

-1

私は比較的新しいウェブデザインで、まだJQueryに乗りこむ準備ができていませんが、必要に応じてJavascriptを使い始めています。私は特定のスクロール位置でdivのメニューバーの背景色を変更する方法を把握することができません。JQueryを使わないでスクロール位置でdivスタイルを変更する

CSS

.mainMenu { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    height: 80px; 
    padding: 20px; 
    transition: all 0.2s; 
}

Javascriptを

var scrollHeight = window.pageYOffset; 

if (scrollHeight >= 100) { 
    document.getElementById("mainMenu").style.backgroundColor = "green"; 
}

私はnoobのよう伝えることができるものから、if文は、負荷上で動作し、VaRのscrollHeightは、ユーザーがスクロールと更新されていません。私はこの仕事をする助けに感謝します！私はJQueryを学ぶことに慣れるつもりですが、ライブラリを手に入れる前にその言語をよりよく理解したいと思います。 Scroll Eventsをよく読んで、いっそ

function checkPosition() { 

    // Continue calling this function: 
    requestAnimationFrame(checkPosition); 

    // Check your position here 

} 
// Initial Call: 
checkPosition();

： -

出典

2017-06-20 Philip Jarrett

偉大なコーダーになる前に、素晴らしい捜索者になる必要があります。ハハ。真剣に、このトピックはインターネット上ですべてカバーされています。 "javascriptはスクロール位置を検出する"の行に沿って検索します –

インターネットはスクロール位置を議論するリソースがいっぱいです。しかし、私はスクロール機能を繰り返すためのさまざまな方法が混乱していました。複数の選択肢があるようで、何もできないようです。これらのリソースの90％以上がJQueryを利用しているようですので、私はそれを学ぶ予定です。助けてくれてありがとう。 –

右あなたがスクロール位置を確認し、それに応じて更新し続けてセットアップ何かする必要があります。

編集：

また、代わりにスタイルを直接操作するのは、私はクラスを追加または削除をお勧めしたい：

element.classList.add("newClass");

（ちなみに、jQueryのは、実際には '定期のJavaScriptよりも簡単です。）

出典

2017-06-20 22:10:34

助けてくれてありがとう！私はrequestAnimationFrame（）関数を読んだ。 Javascriptでスタイルを操作するのではなく、クラスを追加する利点は何ですか？ –

多くのメリットがあります。 1つの懸念事項の分離：あなたのCSSにすべてのスタイル情報を保存することができ、JavaScriptは機能だけに集中することができます。それ以外にも、物事を把握するのが簡単です。＃F00の色を追加してその変更を元に戻す代わりに、「警告」のクラスをもう一度オンまたはオフに切り替えることができます。 –

@PhilipJarrettモジュール性、柔軟性、および管理の容易さ。賛成派はどんな短所よりもはるかに重要です。スタイルシートにスタイルを入れれば、うれしいでしょう。 –

JQueryを使わないでスクロール位置でdivスタイルを変更する

答えて

関連する問題