在滚动到页脚之前停止跟随滚动

Question

我一直在使用以下脚本使页面上的div浮动，因为页面滚动。

这是脚本：

(function($) { 
    var element = $('.follow-scroll'), 
     originalY = element.offset().top; 

    // Space between element and top of screen (when scrolling) 
    var topMargin = 105; 

    // Should probably be set in CSS; but here just for emphasis 
    element.css('position', 'relative'); 

    $(window).on('scroll', function(event) { 
     var scrollTop = $(window).scrollTop(); 

     element.stop(false, false).animate({ 
      top: scrollTop < originalY 
        ? 0 
        : scrollTop - originalY + topMargin 
     }, 300); 
    }); 
})(jQuery); 

这是网页：http://www.wedoblogging.com/faqs/（U：wedoblogging，P：cadb7b6c）

正如你所看到的，浮动的div（标题为：问问）保持浮动下到页脚，我希望这个div在页面到达页脚上方的绿色栏之前停止滚动。

非常感谢您的帮助！

Answer 1

与此相似的规则

top: scrollTop < originalY ? 0 : /*following code*/; 

您添加包含允许的最高位置，另一条规则：

var nextPosition = scrollTop - originalY + topMargin; 
var maxPositionAllowed = 450; 
top: scrollTop < originalY ? 0 : Math.min(nextPosition, maxPositionAllowed) 

所以每当，元素试图去吼叫maxPostionAllowed，你将它强制离顶部有那么远的距离。我不确定450是否是你想要的价值，但你可以看看它的外观。

因此，这将是这个样子：

(function($) { 
    var element = $('.follow-scroll'), 
     originalY = element.offset().top; 

    // Space between element and top of screen (when scrolling) 
    var topMargin = 105; 

    // Should probably be set in CSS; but here just for emphasis 
    element.css('position', 'relative'); 

    $(window).on('scroll', function(event) { 
     var scrollTop = $(window).scrollTop(); 
     var nextPosition = scrollTop - originalY + topMargin; 
     var maxPositionAllowed = 450; 

     element.stop(false, false).animate({ 
      top: scrollTop < originalY ? 0 : Math.min(nextPosition, maxPositionAllowed) 
     }, 300); 
    }); 
})(jQuery);