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

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

我試着計算頁腳高度，將其從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, 
     }); 
    } 
    }) 
});

來源

2017-03-02 Kat

您可以包括你的HTML嗎？ –

如果你想在頁腳的頂部，制止你的形象，你不應該檢查條件$(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), 
     }); 
    } 
})

來源

2017-03-02 22:15:22 alireza

這裏的整個代碼：https：//jsfiddle.net/#&togetherjs=D4i5dfqSLc – Kat

謝謝你的幫助Alireza，我根據你告訴我的東西嘗試別的東西，但它不起作用eather：https：// jsfiddle。 net /＃＆togetherjs = D4i5dfqSLc – Kat

@katalinanadasi我更新了我的答案。它應該適合你。 – alireza

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

回答

相關問題