Question

谁能告诉我为什么我的导航栏不遵循粘性位置属性。

这是我的代码的链接--https://codepen.io/prashant_verma/full/yLMKMQL

Answer 1

使用position: fixed

header {
  position: fixed;
  background-color: lightblue;
  
} 

p {
  width: 150px;
}

<header>
 <h1>Hello World</h1>
</header>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.
</p>

Answer 2

这是因为位置粘性始终遵循其父级的高度和宽度。在您的情况下， #sticky 在其父级 <header> 内，并且 header 具有最小的最小高度，这就是为什么当您传递 header 时， #sticky 紧随其后。因此，解决方案是，您宁愿将 #sticky 保持在这样的位置，以便 <body> 可以成为其父项。像这样，

<body>
  <div id="sticky">
  ...
  </div>
<body>

然后它将始终在页面上始终保持在顶部。
如果你想把它放在 h1 - Flexbox 挑战 2 下，给它顶部：（h1的高度）
虽然 position: fixed 对你来说是一个简单的解决方案，但你也必须了解 position sticky

导航栏不会变得粘稠？

2 个答案: