html - ヘッダーの位置: 固定

Question

下にスクロールしたときに固定ヘッダーを画面に表示できるかどうかを知りたいのですが、どうすればそれを行うことができますか?

position: fixed;クラスの CSSに追加しようとしました.header.darkが、テンプレートが壊れています。

ご協力いただきありがとうございます。

score 0 · Accepted Answer

問題なく動作するはずです。これを試して：

<div class="header">This is the header</div>

CSS

.header {
    position:fixed;
    width:100%;
    top:0;
    left:0;
    background:blue;
    z-index:999;
}

score 0 · Accepted Answer

CSS コード内の 2 つのクラスをスペースで区切ってみてください。これから：

.header.dark {
//fixed position
}

これに：

.header .dark {
// fixed position
}

あなたのコードがどのように見えるかはわかりませんが、このようなことをしようとしている場合

<h1 class="three four">Double Class</h1>

次に、CSSは次のようになります

.three.four { color: red; }

しかし、あなたがこのようなことをしようとしているなら

<div class="header">
<div class="dark">Stay at top</div>
</div>

次に、CSSは次のようになります

.header .dark { position:fixed; }

2 に答える 2