元素如何仅在滚动时固定在页面顶部

How are elements fixed to the top of the page on scroll only?

本文关键字：顶部 何仅 滚动 元素      更新时间：2023-09-26

http://www.devbridge.com/projects/autocomplete/jquery/

左侧的边栏最初打印在页面下方，但当您滚动时，它会向上移动到顶部，然后停留而不是消失在视口顶部之外。我见过很多。

当页面的滚动顶部大于要滚动的div 的顶部位置时，请为该div 提供一个固定位置，以便它跟随用户向下浏览页面。

例：

在这里，我对顶部位置进行了硬编码，因为它在我的用例中永远不会改变。

var $window = $(window), $menu = $("#menu");
$window.bind('scroll', function() {
    var pos = +$window.scrollTop();
    if (pos > 284) {
        $menu.addClass("fixed");
    }
    else {
        $menu.removeClass("fixed");
    }
}).trigger("scroll");​

其中 fixed 是将位置设置为 fixed 并将 top 设置为 0 的类。

你可能想看看粘性.js jQuery插件。如果你不需要它太花哨，它可以很好地处理这些事情。

其背后的原理是检查元素容器中的滚动。一旦达到一定的滚动级别，它就会得到修复。

使用 jQuery，您可以向文档添加一个滚动监听器：

$(document).scroll(function() {
});

在该函数中，您可以检查文档的 scrollHeight 是否大于元素的 y 位置：

if($(document).scrollTop() < $('.sidebar').offset().top) {
    // here you change the css attributes position to fixed and top to 0
    $('.sidebar').css('position', 'fixed').css('top', 0);
} else {
    // change the position of the element to relative (default)
    $('.sidebar').css('position', 'relative');
}

这几乎有效，但由于您始终检查固定元素的位置，因此 y 位置始终为 0。要让它工作，你只需要保存默认的y位置。这是我正在使用的代码：

var initial_y = $('.sidebar').offset().top;
$(document).scroll(function() {
    $e = $('.sidebar');
    if(initial_y - $(document).scrollTop() <= 0) {
        $e.css('position', 'fixed').css('top', 0);
    } else {
         $e.css('position', 'relative');
    }
});
相关文章：