如何让div在滚动时粘在屏幕顶部？

滚动时将 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中文网其他相关文章！