在滾動到頁腳之前停止跟隨滾動

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