首页 > web前端 > css教程 > 正文

如何使 Div 粘在滚动上:固定定位和事件处理指南?

Patricia Arquette
发布: 2024-11-03 07:15:02
原创
428 人浏览过

How to Make a Div Sticky on Scroll: A Guide to Fixed Positioning and Event Handling?

粘性 Div:滚动时紧贴屏幕顶部

想象一下,有一个靠近页面顶部且带有重要按钮或控件的 div。当用户垂直滚动时,您希望该 div 跟随他们,紧贴屏幕顶部。返回顶部后,它应该恢复其原始位置。

解决方案

实现此行为的关键是仅在用户将其滚动经过视口后才使 div “粘性”。这涉及将其 CSS 位置设置为固定。以下是如何实现它:

<code class="javascript">// Cache jQuery objects for efficiency.
const $window = $(window);
const $stickyEl = $('#the-sticky-div');
const elTop = $stickyEl.offset().top;

$window.scroll(function() {
    $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});</code>
登录后复制

此代码将事件处理程序附加到窗口的滚动事件。触发时,它会检查当前滚动位置是否超过 elTop(div 相对顶部的初始偏移量)。如果为 true,它会向 div 添加一个名为 Sticky 的 CSS 类,使其固定在屏幕顶部。否则,它会删除该类,让 div 返回到其原始位置。

相应的 CSS 类定义如下所示:

<code class="css">#the-sticky-div.sticky {
    position: fixed;
    top: 0;
}</code>
登录后复制

以上是如何使 Div 粘在滚动上:固定定位和事件处理指南?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板