アクティブな状態をスクロールする粘着性のテーブル

この記事では、一般的なドキュメントレイアウト：メインコンテンツ列とサイドバーを備えた2列のデザインについて説明します。多くの場合、まばらに人口の多いサイドバーは、粘着性のある目次に最適であり、長いスクロール可能なコンテンツを通してナビゲーションを強化します。

Bramus Van Dammeは、このアプローチを詳述する優れたチュートリアルを提供します。彼はセマンティックHTMLとCSSを強調し、重要なアクティブナビゲーションの強化のためにJavaScriptを予約しています。直接ユーザーのクリックがなければ（ :targetスタイリングで十分かもしれません）、JavaScriptはスクロール位置を追跡し、適切なナビゲーションアイテムを強調表示するために不可欠です。これは、 IntersectionObserver APIを使用してエレガントに達成されます。

結果の実装を以下に示します。

このデザインは、Hakim El Hattabの「Progress Nav」デモに非常に似ています。同じ基本構造を共有しながら、Hakimのバージョンには、洗練されたSVGパスアニメーションが組み込まれ、サブナビゲーションのインデントを含むナビゲーションの進捗状況を視覚的に表します。ビデオのデモンストレーションを以下に埋め込みます。

Hakimの実装では、 IntersectionObserverを使用していません。潜在的に興味深いプロジェクトは、両方のアプローチを組み合わせて、さらに堅牢で視覚的に魅力的なソリューションです。

以上がアクティブな状態をスクロールする粘着性のテーブルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。