问题：
你有最初距离页面顶部 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中文网其他相关文章！
