ブラウザをスクロールさせても、表示領域の上部にヘッダーやナビゲーションなどの特定の要素を常に固定位置に表示させることはCSSのみでも可能だが、ページレイアウトの都合で、最上部にPR画像のような固定表示させたくない要素、そしてその下にヘッダーのような固定表示させたい要素がある場合は、Javascriptでブラウザのスクロール位置や要素の高さなどを取得し、任意のタイミングで特定の要素を固定表示させることで実現できます。ファーストビューをPRスペースとしてより目立たせたいときに有効です。 今回作成したサンプル 【サンプル】特定の位置でヘッダーエリアを固定させる http://ift.tt/1CmY6yc ヘッダー部分のHTMLとCSS 今回のサンプルはページの最上部をPRスペースとしてメインビジュアル画像を配置し、その下にページ上部に固定配置させたいサイトロゴやグローバルナビゲーションを内包するヘッダーを配置する。要素をCSSの「positi...

21.12.2016 00:44
=======================================

ブラウザをスクロールさせても、表示領域の上部にヘッダーやナビゲーションなどの特定の要素を常に固定位置に表示させることはCSSのみでも可能だが、ページレイアウトの都合で、最上部にPR画像のような固定表示させたくない要素、そしてその下にヘッダーのような固定表示させたい要素がある場合は、Javascriptでブラウザのスクロール位置や要素の高さなどを取得し、任意のタイミングで特定の要素を固定表示させることで実現できます。ファーストビューをPRスペースとしてより目立たせたいときに有効です。 今回作成したサンプル 【サンプル】特定の位置でヘッダーエリアを固定させる http://ift.tt/1CmY6yc ヘッダー部分のHTMLとCSS 今回のサンプルはページの最上部をPRスペースとしてメインビジュアル画像を配置し、その下にページ上部に固定配置させたいサイトロゴやグローバルナビゲーションを内包するヘッダーを配置する。要素をCSSの「positi...

http://ift.tt/1abnmbU
December 21, 2016 at 08:44AM