想象一下,有一个靠近页面顶部且带有重要按钮或控件的 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中文网其他相关文章!