position:fixed; 固定バー

Question

html5 css3でコーディングを進めています。

固定のheaderにつまずいています。
headerにposition:fixed;をつけると
下の要素が上がってきて崩れます。
回避策を教えてください。
また、固定のスクロールバーはcssのみで対応できますか
よろしくお願いいたします。

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/jsなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

[m_ai]

ありがとうございます。そうですよね。気をつけます。

Answer 1

position: fixedやposition: absoluteを付けた要素は普通に表示する要素とは別のレイヤー扱いになります。
そのため、ヘッダーより下にあるコンテンツが上に上がってくることになります。

下側のコンテンツで隠れる部分や、大枠のラッパー要素、bodyにヘッダーの高さ以上のmargin-topを付けて、表示されるようにするのが基本です。

teratailの場合は下記のようになっていますね。

<header id="header"></header>
<div id="container"></div>

#header {
  position: fixed;
  height: 40px;
}

#container {
 padding: 41px 20px 0; /* ヘッダーの高さより大きい41pxを上余白に設定 */
}

Comments

[m_ai]

ありがとうございます。margin:topで解決しました。
こちらスクロースをしたら希望の形に変形したいのですが
cssだけでできますか。
jsでクラスを付与するのもトライしているのですが、ガタツキ❔みたいなのが違和感があり、やはりcssのみの方がしっくりきています。またios等の対応状況がお分かりでしたらご教授ください。

[yamato_hikawa]

ヘッダーの変形でしょうか？
CSSでtransitionを設定して、
JSで高さを変えるクラスを付与すれば、CSSで指定した秒数を掛けて徐々に高くすることはできるかと思います。

transitionの対応状況はこちらです。
http://caniuse.com/#feat=css-transitions

[m_ai]

やはえいjsなのですね。
TOPページにはjsを入れたくないらしく、cssの方法も探していました。
ありがとうございます。ご説明頂いた内容がとてもわかりやすかったです