位置粘性未能在阈值后粘贴[重复]

Question

我正在尝试在我的一个元素上使用sticky 定位，但由于某种原因，即使我超过了粘性阈值，我的元素从不粘在页面上。

到目前为止，我在使用它之前从未遇到过问题，所以我不完全确定它为什么不起作用。我还尝试了对 flexbox 的各种修复（就像在其他帖子中指定的那样），并且还在没有改变的情况下处理不同的高度和溢出值。

HTML：

<div class="navigation" id="navigation">
    <div class="navigation-banner"></div>
    <div class="navigation-main"></div>
</div>

CSS：

#navigation{
    position: relative;
    z-index: 1;
}

.navigation-banner{
    color: #fff;
    background: #f17e0e;
    text-align: center;
    font-size: 12px;
    padding: 10px;
}

.navigation-main{
    display: flex;
    position: sticky;
    position: -webkit-sticky;
    top: 0px;

    height: 80px;
    background-color: #fff;
    box-shadow: 0 7px 18px 0 rgb(0 0 0 / 4%);
    box-sizing: border-box;
    align-items: center;
    padding: 0 30px;
}

为了您的方便，工作 JsFiddle 演示。

Answer 1

你必须在#navigation CSS 中添加一些高度，我只是在#navigation CSS 中添加height: 800px。我希望它能解决你的问题。谢谢你

#navigation{
    position: relative;
    height: 800px;
    z-index: 1;
}

.navigation-banner{
    color: #fff;
    background: #f17e0e;
    text-align: center;
    font-size: 12px;
    padding: 10px;
}

.navigation-main{
    display: flex;
    position: sticky;
    position: -webkit-sticky;
    top: 0px;

    height: 80px;
    background-color: #fff;
    box-shadow: 0 7px 18px 0 rgb(0 0 0 / 4%);
    box-sizing: border-box;
    align-items: center;
    padding: 0 30px;
}

<div class="navigation" id="navigation">
    <div class="navigation-banner"></div>
    <div class="navigation-main"></div>
</div>