質問

ウェブサイトをゼロから構築したかったので、うまく機能するように見えるナビゲーションバーを追加し始め、その後、「修正済み」としていくつかの div タグを追加しました。

スクロールするときにナビゲーションバーが固定され、残りのコンテンツがスクロールされるようにする必要があります...

以下にプロジェクトを添付しました

役に立ちましたか?

解決

あなたの問題の解決策があると思います。 あなたのプロジェクトで #navber 要素は、 position:fixed .nowの正の値を設定した場合、z-の正の値を設定した場合セクションのインデックス、それはNavbar要素を重複しています あなたはただ1つのプロパティを設定する必要があります...

section{
position:fixed;
z-index:1;
}
.

固定要素は、文書の流れから削除された要素です。 z-Index Value Elementsが、それらがDOMに表示される順序でスタックされています(同じ階層レベルの最下位の最下位レベルが上に表示されます)。 しかし、element element

のようにNavbarのNavbar.Setプロパティを重複しています。
#navbar{
margin-top:50px;
}
.

他のヒント

あなたが説明していることから、解決策があると思います。

ナビゲーションバーに次のように置く必要があります <nav style="position: fixed; top: 0;">CONTENT</nav>

こうすることで動かなくなり、上部に固定されます。 bottom: 0; 底にくっついてしまいます

アップデート:コードを次のように変更します。

<section class="color-1">
    <nav style="position: fixed; top: 0;">
        <a href="#cl-effect-14">Ailurophile</a>
        <a href="#cl-effect-14">Sumptuous</a>
        <a href="#cl-effect-14">Scintilla</a>
        <a href="#cl-effect-14">Propinquity</a>
        <a href="#cl-effect-14">Harbinger</a>
    </nav>
</section>
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top