首页  >  文章  >  web前端  >  如何让div在滚动时粘在屏幕顶部?

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

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-30 06:31:02983浏览

How to Make a Div Stick to the Top of the Screen While Scrolling?

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn