Question

我一直在为一个班级设计的HTML网站上工作，到目前为止，我主要依靠w3schools之类的网站来帮助我。我在HTML和CSS中使用list方法添加了一个导航栏，它在我的主页上运行良好，但是在我的其他页面上，一旦它碰到了我创建的另一个列表，它就会停止发粘。我想知道是否有办法在滚动列表时仍然保持不变。

要确定是否确实是导致问题的列表，我将列表放在第二页上，并将其放在第一页上，但我遇到了同样的问题。我还尝试将用于导航栏的无序列表更改为有序列表，以查看是否存在某种标签问题，但结果仍然相同。我以前只使用过HTML和CSS，但是如果该解决方案需要使用JS或jQuerey，我将对它感兴趣。

我的代码：

.ul1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #66CDAA;
  position: sticky;
  top: 0;
  border-style: double;
  border-color: #B0E0E6;
  border-width: 10;
}

.li1 {
  display: inline-block;
}

.a1 {
  display: block;
  padding: 8px;
  color: #F0FFFF;
  text-decoration: none;
}

.a1:hover {
  background-color: #B0E0E6;
  transition-duration: 0.9s;
}

.active {
  background-color: #136c68;
}

<ul class="ul1" style="font-family:courier new; font-size:20 px">
  <li class="li1"><a class="a1" href="index.html">Home/Index</a></li>
  <li class="li1"><a class="a1 active" href="hobby.html">Hobby</a></li>
</ul>

导致问题的代码：

  <ul style="font-size:18px;">
<li>The Mass Effect Trilogy</li>
<li>Minecraft</li> 
<li>Portal (1 & 2)</li>  
<li>Dishonored (1 & 2)</li>   
<li>Astroneer</li>  
<li>Octopath Traveler</li>
<li>Pokémon Diamond</li>
<li>Don't Starve</li>   
   </ul>

在评论中提到了这一点，但我也将其放入Codepen中，如果有帮助的话。

我希望能够在网站上向下滚动整个路径，并看到导航栏位于顶部。如果还不够，我可以添加更多代码。谢谢！

Answer 1

这是sticky不太明显的行为，文档通常不会明确指出：“ sticky”属性仅下降到包含元素。也就是说，它不会在其容器下方移动。

因此，要获得我想像的“永久”粘性行为，应将粘性<ul>直接添加到<body>元素中。否则，它只会sticky本身向下移动，直到其包含的<center>元素结束，而该元素在您的内容列表上方...

Answer 2

尽量不要将粘性await asyncGreeting()包装在<ul>中。
如果您希望内容位于居中，请尝试使用<center></center>属性，将文字text-align

之间换行

通过其他列表后，如何使导航栏保持粘性？

2 个答案: