1ページで構成されていて、スクロール位置に応じてグローバルナビが点灯するようなサイトを最近よく見かけます。 自分もその仕組みを取り入れたかったので、勉強がてらデモサイトを作りました。 デモサイト 仕組み的には、都度スクロール位置をjsで取得し、点灯するグローバルメニューを判定しています。 1. CSSの調整 CSSに関しては細かい解説はしませんが、ヘッダー固定メニューの場合、下記のようなCSSを記述します。 ただし、position: fixed;は一部のスマホでは未対応のため、幅広くブラウザ対応する場合は別のやり方を考慮する必要があります。 #header { position: fixed; width: 100%; height: 50px; top: 0; text-align: center; background: rgba(180, 180, 180, 0.9); borde