スクロールしてもついてくるトップヘッダー【追従ヘッダー】

常に表示したい「お問合せ」などの表示をするのに最適な、トップヘッダー。

サイトのPRコメントを表示するのにもぴったり。

でも、スクロールしたら見えなくなってしまっては意味が薄れてしまう。

そこで活躍するのが追従するヘッダーの設定。

以下、「あとりえOne」での記述を記録。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

【HTML】

<div class="flex-item"><a href="faq.html">よくある質問</a></div>

</div>

</header>

【CSS】

.header-top {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 50px;

color: #6f5436;

line-height: 1;

background: #C2B6AF;

}