滚动时如何让导航栏贴在屏幕顶部？答案

【问题标题】：How do I get my nav bar to stick to the top of the screen when you scroll?滚动时如何让导航栏贴在屏幕顶部？
【发布时间】：2020-12-04 17:08:03
【问题描述】：

我正在尝试使用溢出：粘性；为了让我的导航栏在滚动时停止在屏幕顶部但它没有任何改变，我看到人们说将 ul 上的边距和填充设置为 0 我已经完成但没有改变，我也试过了摆脱溢出：隐藏，但这摆脱了栏的背景颜色。下面是 HTML 和 CSS。

HTML

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="Assets/css/site.css">
</head>
<body>
    <header>
        <img src = "Assets/images/Header1.jpg" id = "headImage">

        <nav id = "navBar">
            <ul>
                <li><a href = "index.html" class = "active">Home</a></li>
                <li><a href = "weapons.html">Weapons</a></li>
                <li><a hred = "maps.html">Maps</a></li>
                <li><a href = "modes.html">Modes</a></li>
                <li><a href = "contact.html">Contact</a></li>
            </ul>
        </nav>
        
    </header>


    
    <footer>

    </footer>
</body>

CSS

body{
    background-color: rgb(43, 23, 23);
    padding: 0;
    margin: 0;
    height: 1000px;
}

.active{
    background-color: rgb(31, 31, 31);
}

#headImage{
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: 50% 50%;
}

#navBar ul{
    list-style-type: none;
    overflow: hidden;
    background-color: rgb(20, 20, 20);
    padding: 0;
    margin: 0;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

#navBar li{
    float: left;
}

#navBar a{
    display:block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navBar a:hover{
    background-color: rgb(31, 31, 31);
}

【问题讨论】：

你不需要使用webkit for sticky.Sticky 是默认所有浏览器都支持的，除了 IE。不要将float 用于样式目的。它只能用于段落中的浮动图像。您可以使用flexboxes 或简单地将列表元素声明为inline 并将其与text-align 对齐。在 nabar itel 上使用 position: sticky; 而不是在 ul 上。

标签： html css position nav sticky

【解决方案1】：

很多东西可以修复你的代码，但不一定与你的代码有关。

强制：

删除-webkit-sticky;，因为它没用。 Firefox 支持sticky 作为默认的所有其他浏览器，但 IE 除外。 -webkit- 的使用已经过时多年了。
sticky 应应用于 navbar 本身，而不仅仅是列表。
导航栏需要从标题中排除。如果它是header 的孩子，它会被强制留在孩子内并因此被拉出屏幕。

可选：

使用float 进行造型不仅过时而且从来都不是一件事。出于实际目的，它被许多人误用。它应该只用于段落中的浮动图像。对于该用途，只需将列表删除为inline-block。然后就可以和text-align对齐了。

body {
  background-color: rgb(43, 23, 23);
  padding: 0;
  margin: 0;
  height: 1000px;
}

.active {
  background-color: rgb(31, 31, 31);
}

#headImage {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: 50% 50%;
}

#navBar {
  position: sticky;
  top: 0;
}

#navBar ul {
  list-style-type: none;
  overflow: hidden;
  background-color: rgb(20, 20, 20);
  padding: 0;
  margin: 0;
}

#navBar li {
  display: inline-block;
}

#navBar a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navBar a:hover {
  background-color: rgb(31, 31, 31);
}

<header>
  <img src="Assets/images/Header1.jpg" id="headImage">
</header>
<nav id="navBar">
  <ul>
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="weapons.html">Weapons</a></li>
    <li><a hred="maps.html">Maps</a></li>
    <li><a href="modes.html">Modes</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>



<footer>
</footer>

【讨论】：

哦，非常感谢，我不知道你可以做文本对齐的事情。漂浮物正在融化我的大脑，哈哈。另外，刚刚发现header问题，非常感谢帮助。

【解决方案2】：

只需将图像和 ul 从标题中取出即可。

【讨论】：

您可以将图像保留在标题中。没有引起我的 sn-p 显示的问题