Question

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

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

Answer 1

当页面的滚动顶部大于您想要滚动的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并且顶部为0的类。

Answer 2

您可能想看一下sticky.js jQuery插件。如果你不需要太花哨的话，它可以很好地处理这些事情。

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

Answer 3

使用jQuery，向文档中添加一个scroll-Listener：

$(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');
    }
});

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

3 个答案: