CSSのみで「スクロールすると表示されるフローティングメニュー」

ECサイトなどでタグの規制があり、JavaScriptが使えない環境下でもこれなら可能。

jQueryなどで実装する場合はスクロールイベントを拾ってきて表示させるんじゃないかと思いますが、 この場合はheader部分の背面にフローティングメニューを隠しておくイメージです。

headerにz-index:2;を指定する

z-indexを指定するにはpositionの指定も必要なので、position:relative;も指定します。 これでheaderが最前面に表示されることになります。

menuにz-index:1;を指定する

こちらはフローティング化するので、 position:fixed;とtop:0;を指定します。

これでheaderの背面に隠れることになります。

完成状態がこちら

See the Pen CSSのみで「スクロールすると表示されるフローティングメニュー」 by maru (@maru0014) on CodePen.

headerに背景色もしくは背景画像を付けるのを忘れずにね！

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3標準デザイン講座