Question

最近有人帮我解决了这个问题的开头，但是我得到了更多的帮助。我目前有这个工作 -

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 START，然后向下滚动并停止在另一个div中，就像在此示例中一样。有人有任何想法吗？

这是一个可怕的例子 - jsFiddle。蓝色部分应该坐在黄色部分下面，直到你到达它。由于脑功能有限，我无法弄清楚这是怎么回事。

非常感谢您的帮助。

Answer 1

向函数添加另一个参数以传递start元素，然后在函数内部设置一些vars以将其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'); 1}}值低于起始值，如下所示：

{{1}}

JSFiddle

在另外两个div之间启动和停止div滚动

1 个答案: