開発者の皆さん、こんにちは！
私は StackOverflow を含む Web の大規模なスキャンを行いましたが、私が望むものを文書化するものも、私が望むものと遠く離れたものも見つけることができないようです。
固定ナビゲーション バーを使用してサイトを構築していますが、ナビゲーション バーには実際には背景色 (透明) がありません。navbar 内には 2 つの要素が表示されます。
クライアントのロゴ; 私はカスタム フォントを使用してこれを作成したので、JS を介して適用される CSS とクラスですべての書式設定を実際に制御できます。
メニュー切り替えボタン; これもすべて要素ベースであり、JS を介して適用される CSS とクラスを完全に制御できます。
ページ構成は<section>ベースで、各セクションは「オフホワイト」または「ブラック」のいずれかです。
たとえば<section class="dark">...</section>、黒い背景 (dur) になります。
問題
メニュー ボタンとクライアント ロゴも黒なので、現在表示されている/スクロールされたセクションのクラス (「暗い」または「明るい」) を追跡し、JS を介してナビゲーションにクラスを適用する方法が必要です。
したがって、現在のセクションのクラスが「ライト」の場合、メニュー ボタンとロゴは黒になり、現在のセクションのクラスが「ダーク」の場合、メニュー ボタンとロゴは白に変わります。
セクションスパイ機能を備えた「scrollorama」などの利用可能なプラグインを完全に認識していますが、実際には機能のごく一部を利用するだけでよいため、カスタム関数を作成するだけでより効率的になります。提案も受け付けています。