滚动时将 Div 保持在屏幕顶部
在某些情况下,希望有一个 div 紧贴在屏幕顶部当用户向下滚动经过屏幕时,屏幕会在用户浏览网页时有效地“跟随”他们。此行为可确保按钮或导航控件等基本元素保持易于访问。
要实现此效果,您可以采用以下策略:
JavaScript 代码:
<code class="js">// Cache jQuery objects for performance optimization. var $window = $(window), $stickyEl = $('#the-sticky-div'), elTop = $stickyEl.offset().top; // Attach a handler to the window's scroll event. $window.scroll(function() { // Determine if the div has been scrolled past. if ($window.scrollTop() > elTop) { // Add a CSS class to make the div sticky. $stickyEl.addClass('sticky'); } else { // Remove the sticky class when the user scrolls back up. $stickyEl.removeClass('sticky'); } });</code>
CSS 类:
<code class="css">#the-sticky-div.sticky { position: fixed; top: 0; }</code>
说明:
JavaScript 代码最初缓存 jQuery 对象更好的性能。然后,它向窗口添加一个滚动事件侦听器,每当用户垂直滚动时就会触发该事件侦听器。在侦听器中,它通过将窗口的滚动位置与 div 相对于页面顶部的偏移量进行比较来检查 div 是否已滚动过去。如果滚动位置大于偏移量,则会向 div 添加粘性 CSS 类,将其位置设置为固定并将其放置在屏幕顶部。相反,当用户向上滚动并且滚动位置小于偏移量时,粘性类将被删除,将 div 返回到其原始位置。
以上是如何让div在滚动时粘在屏幕顶部?的详细内容。更多信息请关注PHP中文网其他相关文章!