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

如何使 Div 滚动经过后仍停留在屏幕顶部?

Linda Hamilton
发布: 2024-10-31 14:00:02
原创
526 人浏览过

How to Make a Div Stick to the Top of the Screen After Scrolling Past It?

滚动过去时将 Div 锚定到屏幕顶部

在开发交互式网页时,通常需要有跟随用户的元素滚动,尤其是到达特定部分时。其中一个场景涉及位于页面顶部附近的 div,但在滚动过去时应“紧贴”屏幕。

解决方案

要实现此效果,需要使用创意组合采用了 JavaScript 和 CSS。位置:固定样式应用于 div,但仅在用户滚动经过它之后。

以下是实现它的方法:

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

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

此 JavaScript 代码将事件处理程序添加到window.scroll事件,监视滚动位置。当滚动超过 div (elTop) 的初始位置时,将向其添加“粘性”CSS 类。该类包含以下 CSS 样式:

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

因此,div 假定固定位置,并且只要保持滚动过去,就会保持在页面顶部。当用户滚动回顶部时,粘性类将被删除,并且 div 返回到其原始位置。

该解决方案结合了 JavaScript 和 CSS 的强大功能,通过保持无论页面的滚动位置如何,重要元素都触手可及。

以上是如何使 Div 滚动经过后仍停留在屏幕顶部?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!