jQuery stop scrollen, wenn IMG fixed die Fußzeile

Question

Ich kann nicht finden, wie man ein Bild oben auf der Fußzeile div stoppen, wenn Sie am unteren Rand der Seite scrollen.

Ich habe versucht, die Fußhöhe zu berechnen, um es aus dem window.height zu entfernen, um Scroll-Stopp an diesem Punkt zu erzwingen.

.footer-arrow ist mein festes Bild.

Der folgende Code tut dies halb erfolgreich:

$(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

Wenn Sie Ihr Bild an der Spitze der Fußzeile stoppen wollen, sollten Sie nicht Bedingung $(this).scrollTop() > footHeight überprüfen. Stattdessen sollten Sie überprüfen, ob Unterseite des Bildes an die Spitze der Fußzeile erreicht

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

Was „imageBottom“ ist, hängt davon ab, was ist die Höhe des Bildes und wie lange ist sein Abstand vom oberen Rand des Fensters.

Ich hoffe es hilft.

aktualisieren

Basierend auf Ihren jsfiddle, sollte es funktionieren: bitte

$(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), 
     }); 
    } 
})