1

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

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

4

3 回答 3

2

当页面的滚动顶部大于您要滚动的 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 是一个将位置设置为固定且顶部为 0 的类。

于 2012-05-22T19:38:31.003 回答
0

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

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

于 2012-05-22T19:41:56.903 回答
0

使用 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');
    }
});
于 2012-05-22T19:47:17.693 回答