Html CSS-位置：粘性停止在原始屏幕高度的底部_Html_Css

Html CSS-位置：粘性停止在原始屏幕高度的底部

html css

Html CSS-位置：粘性停止在原始屏幕高度的底部,html,css,Html,Css,我的设置类似于： <body> <div class="non-moving-header"> </div> <div class="floating-header"> </div> <div> Some vertically expanding content... </div> </body> 问题在于，粘滞元素工作正常，直到它到达

我的设置类似于：

<body>
    <div class="non-moving-header">
    </div>
    <div class="floating-header">
    </div>
    <div>
        Some vertically expanding content...
    </div>
</body>

问题在于，粘滞元素工作正常，直到它到达视口的原始底部位置，并在该位置停止，就像它已经到达其父元素的末端一样。如果我手动将body/html height属性设置为1500左右，它将按照预期跟踪文档的所有内容。是否有一种方法可以获得位置：粘滞以正确跟踪自动调整大小的父元素

您需要添加溢出：滚动到您的CSS以获得完整的页面包装器/容器div，然后您的目标粘性元素应该滚动整个web页面，并且在退出原始视图端口时不会被卡住

@jhpratt所附的部分帮助我弄清楚为什么粘性导航在撞击原始视口底部时停止粘滞。剩下的文章提供了信息，但是附件部分应该可以帮助任何试图理解粘性元素是如何工作的人。不过，我正在试图找到链接。@jhpratt所附的部分帮助我弄清楚为什么粘性导航在撞击原始视口底部时停止粘滞。剩下的文章提供了信息，但是附件部分应该可以帮助任何试图理解粘性元素是如何工作的人。不过我正试图找到链接。

body, html
{
    height: 100%;
    min-height: 100%;
}

.floating-header
{
    z-index: 9999;
    top: 0;
    position: sticky;
}