Question

在jQuery中，你是如何制作的，所以DIV会保持不变直到用户向下滚动会使它不再可见（此时它将自己的CSS位置设置为“固定”）？这是我经常看到的一个技巧，只是不确定它是如何完成的。

示例：http://www.yelp.com/search?find_desc=sushi&ns=1&find_loc=San+Francisco%2C+CA

Answer 1

以下是一些代码的简单示例：

var standardPosition = $('div').offset().top;

$(window).scroll(function() {
    if ($(this).scrollTop() > standardPosition) $('div').css('position','fixed');
    else $('div').css('position','relative');
});

将起始位置存储在某个位置非常重要，因此您知道何时向上滚动到足以将其恢复到原来的位置。

http://jsfiddle.net/qC6HB/

Answer 2

你正在寻找一个Sticky Scroller。看看这个：jQuery Sticky Scroller / Position:Fixed Plugin

Simple Demo

Answer 3

使用$(window).scroll()检查window的Y位置，一旦达到＆gt;而不是div元素的Y位置（可以使用offset()获得），你可以将css更改为fixed。

这样的事情：

$(window).scroll(function(e){
    var e = $('div').offset();
    if ($(window).scrollTop() > e.top){
     $('div').css('position','fixed').css('top',0);   
    }else{
    $('div').css('position','static');  
    }


});

示例：http://jsfiddle.net/niklasvh/HUxVC/

知道他们的位置或窗口滚动位置的DIV？

3 个答案: