一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの(サンプルによってはnav要素がないものもあります)になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
![jQuery:スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld](https://cdn-ak-scissors.b.st-hatena.com/image/square/6ddb09acd8994b518486921cc79a362ae393cbc0/height=288;version=1;width=512/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2Fstikcy-or-change-header-and-navigation-when-scrolling-using-jquery.png)