ブラウザをスクロールさせても、表示領域の上部にヘッダーやナビゲーションなどの特定の要素を常に固定位置に表示させることはCSSのみでも可能だが、ページレイアウトの都合で、最上部にPR画像のような固定表示させたくない要素、そしてその下にヘッダーのような固定表示させたい要素がある場合は、Javascriptでブラウザのスクロール位置や要素の高さなどを取得し、任意のタイミングで特定の要素を固定表示させることで実現できます。ファーストビューをPRスペースとしてより目立たせたいときに有効です。 今回作成したサンプル 【サンプル】特定の位置でヘッダーエリアを固定させる http://www.html5-memo.com/sample/jq-books/01 ヘッダー部分のHTMLとCSS 今回のサンプルはページの最上部をPRスペースとしてメインビジュアル画像を配置し、その下にページ上部に固定配置させたい
![特定のタイミングでヘッダーナビゲーション部分を上部に固定する【jQuery連載07】 | HTML5でサイトをつくろう](https://cdn-ak-scissors.b.st-hatena.com/image/square/e7caadd12ec2693bb0c98736b92fbe2d4b7368c1/height=288;version=1;width=512/http%3A%2F%2Fwww.html5-memo.com%2Fwp-content%2Fuploads%2F2014%2F11%2FA129.jpg)