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