jQuery停止滾動時，img固定到達頁腳

Question

我無法找到如何停止在頁面底部滾動頁腳頂部div上固定的圖像。

我試着計算頁腳高度，將其從window.height中移除以強制在該點停止滾動。

.footer-arrow是我的固定圖像。下面的代碼

做到這一點半成功：

$(function() { 
    $(window).scroll(function() { 
    var footHeight = $('#footer').offset().top; 
    var height = (($(window).height()) - footHeight); 
    // if ($(document).height() - footHeight <= ($(window).height() + $(window).scrollTop())) 
    if ($(this).scrollTop() > footHeight) { 
     $('.footer-arrow').css({ 
     position: 'fixed', 
     bottom: 20 
     }); 
    } else { 
     $('.footer-arrow').addClass('fixed'); 
     $('.footer-arrow').css({ 
     position: 'fixed', 
     bottom: 140, 
     }); 
    } 
    }) 
}); 

Answer 1

如果你想在頁腳的頂部，制止你的形象，你不應該檢查條件$(this).scrollTop() > footHeight。相反，你應該檢查圖像的底部達到頁腳

var elementOffset = $('#footer').offset().top; 
var footerTop = (elementOffset - $(window).scrollTop()); 
if(imageBottom > footerTop){ /* image is fixed */ } else { /* image keep image above footer */ } 

什麼是「imageBottom」頂部取決於什麼是你的形象的高度和多久是從窗口頂部的距離。

我希望它有幫助。

更新根據您的jsfiddle

，它應該工作：

$(window).scroll(function() { 
    var elementOffset = $('#footer').offset().top; 
    var footerTop = (elementOffset - $(window).scrollTop()); 
    if(footerTop > ($(window).height() - 20)) { 
     $('.footer-arrow').css({ 
     position: 'fixed', 
     bottom: 20 
     }); 
     } 
     //debugger; 
    if(footerTop < ($(window).height() - 20)){ 
     $('.footer-arrow').addClass('fixed'); 
      $('.footer-arrow').css({ 
      position: 'fixed', 
      bottom: ($(window).height() - footerTop), 
     }); 
    } 
})