【发布时间】：2019-08-21 11:37:51
【问题描述】：
下面代码中的相关元素是.top、.sticky和.other。
.sticky 和 .other 位于 .navbar 容器内。
现在，让整个 .navbar 变得粘滞很容易。将position: sticky; top: 0; 添加到该元素即可。这就是我想要的一般行为。
我面临的挑战是：
如何仅将.sticky 元素设为粘性，以便其下方的所有内容始终滚动？
如果您运行当前代码，您可以看到 .sticky 元素仅保持粘性，直到黄色的 .other 元素在其下方滚动。之后，.sticky 元素不再具有粘性。
这就是我要解决的问题。如何让蓝色的.sticky 元素始终保持粘性？ （在您向上滚动到绿色 .top 部分被隐藏的点之后）
理想情况下寻找纯 CSS 解决方案。如果这不可能，JavaScript/jQuery 解决方案是可以接受的，但在向上或向下两个方向滚动时必须正常工作。
更新：
我知道从标题中取出黄色的.other 元素可以解决问题。但问题是黄色的.other 元素需要成为标题的一部分。 .sticky和.other都需要在大屏幕上并排显示，在手机屏幕上并排显示。这就是为什么它们目前是另一个容器中的子元素。因此，在这种情况下，将黄色元素移出标题并不是我真正可以使用的选项。
.top {
min-height: 40px;
background-color: darkgreen;
}
.navbar {
/* position: sticky;*/
/* top: 0;*/
}
.sticky {
min-height: 50px;
background-color: lightblue;
position: sticky;
top: 0;
}
.other {
min-height: 90px;
background-color: yellow;
}
.content {
background-color: lightgray;
min-height: 600px;
}
.bottom {
background-color: darkgray;
min-height: 200px;
}<div class="top">
Top
</div>
<div class="middle">
<header class="navbar">
<div class="header-container">
<div id="row-masthead">
<div class="sticky">
Sticky
</div>
<div class="other">
Other
</div>
</div>
</div>
</header>
<main class="content">
<h2>
Content
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus non vero quam suscipit veniam ex praesentium id sunt, voluptatibus ad ipsa asperiores enim quis omnis alias maxime saepe aut. Iste.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus non vero quam suscipit veniam ex praesentium id sunt, voluptatibus ad ipsa asperiores enim quis omnis alias maxime saepe aut. Iste.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus non vero quam suscipit veniam ex praesentium id sunt, voluptatibus ad ipsa asperiores enim quis omnis alias maxime saepe aut. Iste.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus non vero quam suscipit veniam ex praesentium id sunt, voluptatibus ad ipsa asperiores enim quis omnis alias maxime saepe aut. Iste.
</p>
</main>
</div>
<div class="bottom">
<h2>Footer</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus non vero quam suscipit veniam ex praesentium id sunt, voluptatibus ad ipsa asperiores enim quis omnis alias maxime saepe aut. Iste.
</p>
</div>【问题讨论】：
-
你试过
postion:fixed吗？ -
@Soothran 我不会有
position: fixed的 sticky 行为，对吗？我正在寻找您使用position: sticky获得的行为。
标签： javascript jquery css sticky