如何使 Div 粘在滚动上：固定定位和事件处理指南？

粘性 Div：滚动时紧贴屏幕顶部

想象一下，有一个靠近页面顶部且带有重要按钮或控件的 div。当用户垂直滚动时，您希望该 div 跟随他们，紧贴屏幕顶部。返回顶部后，它应该恢复其原始位置。

解决方案

实现此行为的关键是仅在用户将其滚动经过视口后才使 div “粘性”。这涉及将其 CSS 位置设置为固定。以下是如何实现它：

<code class="javascript">// Cache jQuery objects for efficiency.
const $window = $(window);
const $stickyEl = $('#the-sticky-div');
const elTop = $stickyEl.offset().top;

$window.scroll(function() {
    $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});</code>

此代码将事件处理程序附加到窗口的滚动事件。触发时，它会检查当前滚动位置是否超过 elTop（div 相对顶部的初始偏移量）。如果为 true，它会向 div 添加一个名为 Sticky 的 CSS 类，使其固定在屏幕顶部。否则，它会删除该类，让 div 返回到其原始位置。

相应的 CSS 类定义如下所示：

<code class="css">#the-sticky-div.sticky {
    position: fixed;
    top: 0;
}</code>

以上是如何使 Div 粘在滚动上：固定定位和事件处理指南？的详细内容。更多信息请关注PHP中文网其他相关文章！