我如何阻止固定元素超出頁腳與jQuery

Question

我做了側邊欄中的「開始」元素，當它滾動超過某個點時，但在較小的筆記本電腦屏幕（14「至18」），當用戶向下滾動，最終跑到頁腳中。

我想要設置它，以便一旦它檢測到粘滯區域內，比如10個像素的頁腳，它就會停止。

鏈接到網站

http://previewyournewwebsite.info/otsl/compare-reverse-mortgage-loan-products

這是我使用的代碼：

function sticky_relocate() { 
     var window_top = $(window).scrollTop(); 
     var div_top = $('.sticky-anchor').offset().top; 
     if (window_top > div_top) 
      $('.sticky-element').addClass('sticky') 
     else 
      $('.sticky-element').removeClass('sticky'); 
    } 

    $(function() { 
     if ($('.sticky-anchor').length != 0){ 
      $(window).scroll(sticky_relocate); 
      sticky_relocate(); 
     } 
    }); 

Answer 1

什麼類似的東西

function sticky_relocate() { 
    var sticky_element = $('.sticky-element'); 
    var window_top = $(window).scrollTop(); 
    var div_top = $('.sticky-anchor').offset().top; 
    var div_height = sticky_element.height(); 
    var footer_top = $('.footer').offset().top; 
    if (window_top > div_top) { 
     sticky_element.addClass('sticky') 
    } else { 
     sticky_element.removeClass('sticky'); 
    } 
    if(div_top + div_height > footer_top - 10) { 
     sticky_element.css("top", footer_top - 10); 
    } 
} 

$(function() { 
    if ($('.sticky-anchor').length != 0){ 
     $(window).scroll(sticky_relocate); 
     sticky_relocate(); 
    } 
}); 

獲取div的高度，並檢查是否它的頂部位置+高度不會超過f的頂部位置ooter。