如何使 Div'粘”到滚动页面的顶部？

垂直滚动时将 Div 放置在屏幕顶部

问题：

我该如何制作当用户滚动浏览网页时，div“粘”在网页顶部？返回页面顶部后，我想让div恢复到原来的位置。

解决方案：

这个功能的关键是设置position:fixed在div 仅在用户滚动过去后才显示。为了实现这一点，我们可以使用附加到 window.scroll 事件的处理程序：

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

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

当页面滚动经过它时，此代码会向 div 添加一个粘性 CSS 类，并在页面返回时删除该类到顶部。 CSS 类定义为：

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

添加 Sticky 类后，div 将采用固定位置并保持在屏幕顶部。当类被删除时，它会返回到原来的位置。

注意：代码已经过优化，可以缓存 jQuery 对象以提高性能。

以上是如何使 Div'粘”到滚动页面的顶部？的详细内容。更多信息请关注PHP中文网其他相关文章！