2

最近有人帮助我解决了这个问题，但我正在寻求更多帮助。我目前有这个工作 -

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');

这里的例子 - jsFiddle

一旦 div 到达另一个 div 的边界，它就会停止滚动 - 效果很好。我现在想弄清楚的是如何让滚动 div 从一个 div 开始，然后向下滚动并在另一个 div 处停止，就像在这个例子中那样。有人有什么想法吗？

这是一个可怕的例子——jsFiddle。蓝色部分应该位于黄色部分下方，直到您到达它。由于我的大脑功能有限，我只是无法弄清楚这是怎么可能的。

非常感谢您的帮助。

4

1 回答 1

3

向您的函数添加另一个参数以传递起始元素，然后在您的函数中设置一些变量以将其存储offset().top + height()为起始位置，然后添加另一个参数if以检查该scrollTop()值是否低于起始值，如下所示：

var windw = this;

$.fn.followTo = function (from, bumper) { //renamed "elem" to "bumper", to 
    var $this = this,                     //prevent ambiguity
        $window = $(windw),
        $from = $(from),
        $bumper = $(bumper),
        $startPos = $from.offset().top + $from.height(), //new start position
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() < $startPos) { //new if < startPos
                $this.css({
                    position: 'absolute',
                    top: $startPos //resets element to start position
                });
            } else 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('#half', '#two');

JSFiddle

于 2012-06-12T09:59:32.217 回答