使用 css 创建 sticky/fixed 导航栏时出现问题

Question

我正在制作一个顶部栏需要固定在当前位置的网站。

请检查我的 git 集线器存储库中的代码，因为它太大而无法容纳 my github repository

基本上我知道我们可以通过使 div 标签 position: fixed; 或 position: sticky 以两种方式完成，但它们都不起作用。

Answer 1

只需确保您的 div 具有以下样式：

position: fixed;
top: 0px;

顶部可以有任何你想要的值。如果您希望它位于页面的最顶部且没有边距，请将其设置为 0，或者将其设置为 10px，例如您是否希望它位于 [=21] 顶部下方 10 像素=].

这将确保您的 div 或页眉始终位于该特定位置，无论您滚动到哪里。

Answer 2

要解决这个问题，您可以简单地使用：

.sticky{
    position: fixed;
    top: 0;
    width: 100%;
}

position 和 top 已经被其他用户解释过，但是 width 也需要保持导航栏的原始形式，否则导航栏的组件会因为失去它的位置而毁容。

在你的第一张图片中我们可以看到部件已经毁容

Problem in creating a sticky/fixed nav bar using css