Question

我的导航栏样式如下：

ul#navigation {
    font-size: 1em;
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #824c71;
    position: sticky; /*<-!*/
    top: 0;
}

现在，我的页面上有几个漂浮元素，样式如下：

<div style="width:50%;background-color:#e6c79c;margin:3%;float:left;padding:1em;">

并且旁边（因为它向左浮动）这一个：

<div style="width:flex;background-color:#e6c79c;margin:3%;float:right;padding:2em;padding-top:1em;text-align:center;position:sticky;">

我的尝试是什么 1.滚动浮动div元素时粘滞的导航栏保持粘滞状态。使用我的设置它是粘性的，直到它接触浮动元素。 2.同一页面上的两个粘性元素。向右浮动的第二个元素在滚动时应粘在导航栏上（可能在1em的安全距离内））

如果有人能帮助我看到我的错误，那就太好了。提前谢谢，欢呼！

编辑：我为一个只允许使用HTML和CSS的项目执行此操作..不要问..

Answer 1

如果你想让导航栏始终保持“粘性”状态。使用css属性display：fixed;而不是粘性。 Here是显示展示属性之间差异的链接。根据滚动位置定位固定和相对之间的粘性切换。固定将导航条始终保持在顶部，您可以使用顶部，底部，左侧，右侧属性将固定导航栏放置在页面上所需的位置。

HTML5导航栏不会粘在浮动对象上

1 个答案: