如何使 Div 在滚动经过它时“粘”到屏幕顶部？

如何在滚动经过 Div 时将其固定在屏幕顶部

问题：

你有最初距离页面顶部 100 像素的 div，包含基本按钮或控件。当用户向下滚动经过此 div 时，您希望它“粘在”屏幕顶部以便于访问。当用户向上滚动时，你希望它返回到原来的位置。

解决方案：

秘诀在于利用position:fixed属性，但只能在之后用户已滚动经过该 div。以下是实现此目的的方法：

JavaScript:

<code class="javascript">var $window = $(window),
    $stickyEl = $('#the-sticky-div'),
    elTop = $stickyEl.offset().top;

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

此代码捕获窗口的滚动事件，并在用户滚动过去时动态应用“粘性”CSS 类div 的顶部。

CSS:

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

此 CSS 设置“粘性”类以使 div 粘附在屏幕顶部。默认情况下，position:fixed 相对于窗口放置 div，确保它在整个滚动过程中保持在顶部。

工作原理：

页面加载时， div 的位置距顶部 100px。当用户向下滚动时，JavaScript 检查当前滚动位置是否超过 div 的初始顶部位置。如果是这样，它会将“sticky”类应用于 div，使其固定在屏幕顶部。当用户向上滚动时，过程相反，并且“粘性”类被删除，允许 div 恢复其初始位置。

总而言之，此解决方案有效地使 div “粘住”到当用户滚动经过它时，它会显示在屏幕顶部，而当用户向上滚动时，它会返回到其原始位置。

以上是如何使 Div 在滚动经过它时“粘”到屏幕顶部？的详细内容。更多信息请关注PHP中文网其他相关文章！