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

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