Question

我正在为可能的客户制作一个示例网站，并且我之前已经开始使用它，但是无法复制它。基本上，我的标题div是蓝色的框，标题/菜单栏应该在其正下方。最后，我在标题下方显示了类似于网站其余部分的大图像。我希望菜单栏/标题（在网站加载时）开始定位在Title div的正下方。当您向下滚动浏览网站时，它会向上移动直至到达网站顶部，然后以固定的位置工作，最好使用CSS position: sticky;

我在CSS的以下脚本中拥有的东西似乎使标头充当固定位置，而不是其他任何位置。即使我使用top: 90px;来抵消它，我也试图将div包围整个页面（标题除外），并将标头放置在其中以用作一种容器，但这是行不通的。我试着根本不使用包围式div。娜达...

CSS：

#sticky {
position: sticky;
background: orange;
top:90px;
z-index: 50;
width: 100%;
height:50px;
}

HTML：

    <body>
    <div id="title">
    </div>
    <div id="sticky">
    <ul id="ulHeader">
    <li>Home</li>
    <li>Menu</li>
    <li>Find Us</li>
    <li>Contact Us</li>
    </ul>
    </div>

    <div id="image">
    <img src="images/tacos.jpeg">
    </div>

我没有收到任何错误消息，并且希望使用此代码，标题/菜单栏从页面顶部开始90px，并滚动滚动使其停留在顶部一旦滚动足够远。不幸的是，最终结果是标题只是像固定元素一样始终从顶部90px停留。

Answer 1

将顶部更新为0px，以使其停留在页面顶部

#sticky {
position: sticky;
background: orange;
top:0px;
z-index: 50;
width: 100%;
height:50px;
}

您也可以查看此example

如何解决：粘性位置表现得像固定的一样？

1 个答案: