Utilizzare jQuery per rilevare quando un elemento si trova vicino alla fine della pagina

Question

Ho uno script che elabora la distanza di un elenco di elementi dalla parte superiore della pagina, ma non sono sicuro come rilevare la sua distanza da il fondo. Quando si tocca il fondo (beh, 20px prima che il fondo) Voglio generare un evento e fade out:

$(window).on('load resize scroll', function() { 
    $('.links__item').each(function() { 
     if (($(this).offset().top - $(window).scrollTop()) < 20) { 
      $(this).stop().fadeTo(100, 0) 
     } else { 
      $(this).stop().fadeTo('fast', 1) 
     } 
    }) 
}) 

Se qualcuno ha qualche consiglio, molto apprezzato. Sto scorrendo gli elementi per rilevarlo, quindi quando uno di loro colpisce il 20px dal basso, voglio farlo svanire. Grazie!

Answer 1

È possibile utilizzare la funzione di jQuery height() ai vostri calcoli, come:

$(window).height(); 
$(this).height(); 

In particolare, se si vuole rilevare se la parte superiore dell'elemento è vicino alla parte inferiore della pagina, è possibile utilizzare questo calc:

if ($(this).offset().top > ($(window).scrollTop() + $(window).height() - 20)) // True 

Answer 2

Halcyon,

non sono sicuro di quello che si vuole sparare, ma è possibile verificare nella parte inferiore della pagina come questa

$(window).on('load resize scroll', function() { 
    $('.links__item').each(function() { 
     if(($(this).offset().top > ($(window).scrollTop() + $(window).height() - 20)) { 
      $(this).stop().fadeTo(100, 0) 
     } else { 
      $(this).stop().fadeTo('fast', 1) 
     } 
    }) 
}) 

motivo è jQuery trova in fondo alla pagina in base alla propria altezza

1 $(window).height(); // returns height of browser viewport 
2 $(document).height(); // returns height of HTML document