我目前正在一个网站上工作并有一个导航栏，使用CSS设置为粘性。然而，当我向下滚动时，导航栏似乎被“卡住”了一点点（你可以在第二张图片中看到这一点）。任何人都可以帮我这个吗？
以下是我用来使导航栏粘贴的代码。
.header-wrapper {
width: 100%;
height: 80px;
position: fixed;
z-index: 10;
}
.content {
width: 90%;
position: absolute;
left: 20px;
width: 1040;
}
答案 0 :(得分：1)
不完全确定您要求的是什么，而是基于导航栏应如何运作。我会做以下几点。
我会将.header-wrapper中的css更改为以下内容。
List<String>答案 1 :(得分：0)
在两个图像中，距窗口边界有一个上，左，右距离。实际位置在这些图像中并没有真正的不同，只有在第二个图像中，内容在导航栏周围变得可见。
如果您希望导航栏真正跨越整个宽度并从顶部开始，您可能需要将其添加到CSS以避免默认边距：
html, body {
margin: 0;
}
如果您仍然希望导航栏与顶部保持一定距离，但滚动时没有任何内容可见，则可以将导航栏放入具有白色背景和一些填充的容器DIV中。
答案 2 :(得分：0)
我明白你要说的是什么。固定定位意味着.header-wrapper将“悬浮”在所有其他html内容之上。所以你所看到的并不是它被卡住了。它只是意味着它固定在页面顶部应该是这样。尝试删除填充和边距，这样就不会看到文本从标题顶部向外滚动，如下所示：
body {margin:0;padding:0}
.header-wrapper {
width: 100%;
height: 20px;
position: fixed;
z-index: 10;
background-color:blue;
}
.content {
padding-top:20px;
width: 90%;
position: absolute;
left: 20px;
width: 1040;
} <header class="header-wrapper">
Header
</header>
<main class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsam, natus sed, nisi ratione, delectus sequi ullam consequuntur neque quas veritatis fugit dolore inventore, ea dignissimos aperiam commodi necessitatibus doloremque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nam, vero recusandae, minus repudiandae quo vel. Laudantium suscipit eum quod voluptatum fugit, quaerat, rerum labore porro, facere possimus enim quos.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius voluptatibus dolorem dolor labore ut, iure iusto ratione inventore optio ab libero. Repellendus nostrum illo vel accusamus recusandae, omnis velit sed?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsam, natus sed, nisi ratione, delectus sequi ullam consequuntur neque quas veritatis fugit dolore inventore, ea dignissimos aperiam commodi necessitatibus doloremque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nam, vero recusandae, minus repudiandae quo vel. Laudantium suscipit eum quod voluptatum fugit, quaerat, rerum labore porro, facere possimus enim quos.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius voluptatibus dolorem dolor labore ut, iure iusto ratione inventore optio ab libero. Repellendus nostrum illo vel accusamus recusandae, omnis velit sed?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsam, natus sed, nisi ratione, delectus sequi ullam consequuntur neque quas veritatis fugit dolore inventore, ea dignissimos aperiam commodi necessitatibus doloremque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nam, vero recusandae, minus repudiandae quo vel. Laudantium suscipit eum quod voluptatum fugit, quaerat, rerum labore porro, facere possimus enim quos.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius voluptatibus dolorem dolor labore ut, iure iusto ratione inventore optio ab libero. Repellendus nostrum illo vel accusamus recusandae, omnis velit sed?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsam, natus sed, nisi ratione, delectus sequi ullam consequuntur neque quas veritatis fugit dolore inventore, ea dignissimos aperiam commodi necessitatibus doloremque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nam, vero recusandae, minus repudiandae quo vel. Laudantium suscipit eum quod voluptatum fugit, quaerat, rerum labore porro, facere possimus enim quos.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius voluptatibus dolorem dolor labore ut, iure iusto ratione inventore optio ab libero. Repellendus nostrum illo vel accusamus recusandae, omnis velit sed?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsam, natus sed, nisi ratione, delectus sequi ullam consequuntur neque quas veritatis fugit dolore inventore, ea dignissimos aperiam commodi necessitatibus doloremque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nam, vero recusandae, minus repudiandae quo vel. Laudantium suscipit eum quod voluptatum fugit, quaerat, rerum labore porro, facere possimus enim quos.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius voluptatibus dolorem dolor labore ut, iure iusto ratione inventore optio ab libero. Repellendus nostrum illo vel accusamus recusandae, omnis velit sed?
</main>