gpt4 book ai didi

html - 通过另一个列表后如何使导航栏保持粘性?

转载 作者:行者123 更新时间:2023-11-28 02:23:25 25 4
gpt4 key购买 nike

我一直在为一个类(class)设计 HTML 网站,直到现在,我主要依靠像 w3schools 这样的网站来帮助我完成它。我使用 HTML 和 CSS 中的 list 方法添加了一个粘性导航栏,它在我的主页上运行良好,但在我的其他页面上,一旦它碰到我制作的另一个列表,它就不再粘性了。我想知道是否有办法让它在滚动列表时仍然保持不变。

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

我的标记:

.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 中如果这会有所帮助。

我希望能够在网站上一直向下滚动并看到导航栏停留在顶部。如果这还不够,我可以添加更多代码。谢谢!

最佳答案

这是 sticky 的不太明显的行为文档通常没有说清楚:'sticky' 属性只能向下延伸到包含元素。也就是说,它不会移动到其容器下方。

因此,要获得我想你想要的“永久”粘性行为,你应该添加粘性 <ul>直接到 <body>元素。否则它只会sticky本身就包含<center>恰好在您的内容列表上方结束的元素...

关于html - 通过另一个列表后如何使导航栏保持粘性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55976643/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com