固定ヘッダとスクロールコンテンツエリアを作成する方法
私が取り組んでいるサイトを試しています。私のクライアントは、ナビゲーションとロゴの入ったヘッダーをそのまま使用したいので、訪問者は常にスクロールしながらページコンテンツを読むためにナビゲーションバーにアクセスすることができます。ラッパーのfixedにdivを追加しました。これは背景を静的に保ちますが、この設計では背景もヘッダーの一部です。
私のページは http://axiomwest.com/client-services/ /です。
固定のヘッダー領域を確保し、メインのコンテンツ領域でのみスクロールを許可するにはどうすればよいですか。
さて、あなたがここでする必要があるのはそれ自身のラッパーにヘッダーを分けることです。これを機能させるために私がしたのは、#header divを閉じた直後に#wrapper divを閉じて、同じクラスのフィードとラッパー以外の新しいIDで新しいdivを開始することです。
このようになります：
<div class="hfeed" id="wrapper">
<div id="header">
<div id="logo">...
(stuff in here)
</div><!-- #header -->
</div>
<div class="hfeed" id="wrapper-lower">
<div id="main">
<div id="container">...
(so on, so forth)
これで、position：を#wrapper要素に固定して適用すると、目的の効果が得られます。あなたはまだあなたのグラフィックが本当に効果を売るために働く方法を変える必要があるでしょう。スウッシュの赤い線の下の部分がすべて透明になっている場合は、.pngを使用することをお勧めします。ファイルサイズはもっと大きくなりますが、これがあなたが使用している唯一の大きな画像であれば、大丈夫でしょう。
ほとんど忘れました！固定要素を超えてプッシュするために、＃wrapper-lowerに上部パディングを適用する必要もあります。 ＃wrapper-lowerのpadding-topは#headerの全高と同じでなければなりません。