CSSでヘッダ固定

トップ >> 2007/04 >> ヤンプー >> CSSでヘッダ固定

2007/04/17 (Tue)

■Bookmark：css：■ヤンプー

このサイトでスクロールしてみてください。デザインではなく機能面で興味深いサイトです。フレームを使わずに、ヘッダを固定しています。スクロールしてもヘッダはずっと同じ位置に表示され続けているとおもいます。しかも右隅スクロールタブ部分は分割されないので見た目もきれい。
レイヤー分けして、表レイヤーはヘッダ部分を固定して表示。裏レイヤーはヘッダ分上に空白をあけておくだけでできるようです。高味さん検証してもらったところ、FireFoxでしかできなかったレイヤー固定をハックしてIEでも動作するように改善しているようです。
上ナビに限らず短めな横ナビでもでも使える便利な表現だと思います。

COMMENT

投稿者: Anonymous | 2010 07/23 (Fri) 18:57 PM

投稿者: Anonymous | 2010 01/21 (Thu) 17:01 PM

投稿者: Anonymous | 2009 05/28 (Thu) 22:46 PM

高味さんには軽く検証してもらい済みです。IE FireFox Safariで動いてますし問題なさそうです。ヘッダに限らずナビゲーションでもできるのですが、「固定」ということは、長すぎるものは画面外にスクロールすることができなくなるデメリットがあります。長いためナビゲーションや動的なナビゲーションでは実装できないですね。