javascript - 到达另一个 div 时停止 div 滚动

Question

基本上，我目前有一个 div，它保持固定并在用户滚动时跟随用户向下滚动，直到到达某个点。我可以很容易地让它停在一个固定的像素位置，就像我在下面的例子中所做的那样，但是因为我是一个 jQuery 白痴，所以我不知道如何让它停在一个 div 上。

这是我到目前为止使用的内容:

var windw = this;

$.fn.followTo = function ( pos ) {
     var $this = this,
        $window = $(windw);

$window.scroll(function(e){
    if ($window.scrollTop() > pos) {
        $this.css({
            position: 'absolute',
            top: pos
        });
    } else {
        $this.css({
            position: 'fixed',
            top: 0
        });
    }
});
};

$('#one').followTo(400);

示例如下:jsFiddle

我希望它在到达第二个 div 时停止的原因是，在我使用的流畅布局中，第二个 div 将根据浏览器大小位于不同的位置。为它定义一个特定的停止点是行不通的。任何人都知道如何让这个做我想做的事？或者，固定 div 是否有可能在达到向下百分比时停止滚动？我环顾四周，但没有找到任何东西。

感谢您的帮助。

Answer 1

这就是您要找的吗？

http://jsfiddle.net/Tgm6Y/1447/

var windw = this;

$.fn.followTo = function ( elem ) {
    var $this = this,
        $window = $(windw),
        $bumper = $(elem),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() > (bumperPos - thisHeight)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

$('#one').followTo('#two');

编辑:关于您要求直到某个点才滚动的请求，只需将其替换为:

if ($window.scrollTop() > (bumperPos - thisHeight)) {

用这个:

if ($window.scrollTop() <= (bumperPos - thisHeight)) {