'Position: sticky' 不粘中卷，原因不明

Question

我一直在为一个 uni 项目开发我的第一个网站，在我的 CSS（或我的 HTML，不太确定）中遇到一个非常奇怪的错误，这意味着导航粘滞我现在工作正常的页面顶部的栏将取消粘贴并在我网站所有 3 个页面顶部附近的随机点显示 'position: relative' 属性。

我在使用两篇大于和小于 512 像素的@media (max-width/min-width) 文章向网站添加响应功能后注意到了这个错误

在父容器和本机容器中尝试过不同的溢出，但没有成功，只是进一步破坏它。

当前和错误格式的网页在此处在线： http://db814.brighton.domains/ci435/learningJournal.html

这里是相关的 HTML 和 CSS 片段，

    <div class="desktop-menu">
        <ul id="page-links">
            <li class="active" ><a href="learningJournal.html">Learning Journal</a></li>
            <li><a href="tutorial.html">Tutorial</a></li>
            <li><a href="contact.html">Contact Me</a></li>
        </ul>

@media (min-width: 512px) {
 .desktop-menu  {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index:1;
 }
 .desktop-menu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
   background-color: #AEA79F;
   overflow: hidden;
   width: 100%;
   bottom 0;
 }
.desktop-menu li    {
   float: left;
 }
.desktop-menu a {
   display: block;
   color: #fff;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
 }
.desktop-menu a:hover {
   color: #E95420;
 }
.mobile-menu {
    display: none;
}

Answer 1

该错误仅仅是由给 body 的 100% 高度引起的。

'Position: sticky' 不粘中卷，原因不明

'Position: sticky' un-sticking mid scroll, reason unknown

html

css

css-position

sticky