"如何使用 css 使我的导航栏粘在屏幕顶部"

Question

所以我为我的网站创建了一个导航栏，似乎不可能让它粘在屏幕上，这让我很困惑。

我遵循了凯文鲍威尔的教程，但他没有展示如何让它粘在页面顶部。

这是我的 HTML：

    <header>
        <div class="container">
            <h1 class="logo">Navigation</h1>
    
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
            </nav>
        </div>
    </header>

这是我的CSS：

.container {
    width: 80%;
    margin: 0 auto;
}

header {
    background: rgb(155, 155, 155);
    border-radius: 0px 0px 25px 25px;
}

.logo {
    float: left;
    padding: 0px 0;
}

我不得不稍微缩小 css 代码，但 ul 在这里并不重要。

Answer 1

使用position: sticky<\/code><\/a>和top:0<\/code> 。

这在 IE 11 中不起作用。

Answer 2

只需将其添加到您的标题标签 CSS 中：

header{
  position: fixed;
  top: 0;
}

Answer 3

刚刚添加了一些导航的 CSS。

nav {
   overflow: hidden;
   position: fixed;
   top: 0;
   width: 100%;
}