Il piè di pagina si apre con .slideUp ma scorre giù

Question

Ho la funzione jQuery .slideUp e .slideDown di seguito, e quando si raggiunge il div #showfootershop nella parte inferiore della finestra del browser, il div #footershop si apre e quindi scorre immediatamente .

Come è possibile ottenere #footershop rimanere "attivo" e visibile quando #showfootershop si trova nella parte inferiore della finestra del browser e non scorrere verso il basso finché l'utente non fa scorrere verso l'alto la finestra del browser?

Fiddle:http://jsfiddle.net/8PUa9/1/

jQuery:

$(window).scroll(function(){ 
/* when reaching the element with id "showfootershop" we want to 
show the slidebox. */ 

    var distanceTop = $('#showfootershop').offset().top - $(window).height(); 

    if ($(window).scrollTop() > distanceTop) 
     $("#footershop").slideUp(); 
    else 
     $("#footershop").slideDown(); 

}); 

html nel piè di pagina:

<div id="showfootershop"></div> 
<div id="footershop"> 
    <h1>Shop Links</h1> 
</div> 
</body> 
</html> 

CSS:

#footershop { 
    height:35px; 
    width:100%; 
    display: none; 
    z-index: 2; 
} 

Answer 1

Utilizzare due funzioni per slidingUp e slidingDown e attivarli una volta visualizzato il cursore e nascosto in alternativa.

$(function() { 

    var slideUp = function() { 
     if ($(window).scrollTop() + $(window).height() >= $(document).height()) { 
      console.log('At bottom!!'); 
      //toggle the handlers 
      $("#footershop").slideDown(function() { 
       $(window).off('scroll', slideUp).on('scroll', slideDown); 
      }); 
     } 
    }; 

    var slideDown = function() { 
     if ($(window).scrollTop() + $(window).height() < $(document).height()) { 
      //toggle the handlers 
      $("#footershop").slideUp(function() { 
       $(window).off('scroll', slideDown).on('scroll', slideUp); 
      }); 
     } 
    }; 


    $(window).on('scroll', slideUp); 
});​ 

EDIT: Penso che il problema principale che hai è #footershop aumenta document.height quando mostra e riduce quando è nascosta, che è corretto. Ciò causa ulteriori eventi di scorrimento che creano il comportamento indesiderato.

Controllare questo violino: l'ho risolto parzialmente.

http://jsfiddle.net/BuddhiP/8PUa9/8/

Controllare questa versione JSBin per la versione fissa: http://jsbin.com/axobow/2

La cosa principale che ho fatto è stato #footershop è ora posizionato in modo assoluto, in modo da non causare il formato del documento a cambiare quando mostrato o nascosto, che è importante in questo caso come se document.height() modificato abbia effetto sul calcolo.

Anche se il violino funziona come previsto, il div non è posizionato proprio in basso. Spero che tu possa risolvere il problema.

Spero che questo aiuti.

NOTA: è necessario testare il violino con la finestra a tutta altezza, altrimenti non si vedrà il piè di pagina che si sposta da quando si trova da qualche parte nel mezzo del testo.

Answer 2

slideUp() nasconderà anche l'elemento e l'offset di un elemento nascosto è [0,0] così il footer istantaneo è nascosto distanceTop è negativo. È possibile animare l'altezza a zero e ottenere lo stesso risultato visivo e dal momento che non si nasconde il piè di pagina si avrà lo stesso offset top

Answer 3

Un'alternativa a tutto questo jQuery slideUp/slideDown consiste nell'utilizzare i CSS per gestirlo.

Rileviamo quando l'utente ha raggiunto il vostro elemento #showfootershop e quindi aggiungere o rimuovere una classe dal piè di pagina:

$(window).scroll(function() 
{ 

    var distanceTop = $('#showfootershop').offset().top - $(window).height(); 

    if($(document).scrollTop() >= distanceTop) 
     $('#footershop').addClass("show"); 
    else 
     $('#footershop').removeClass("show"); 
} 

Poi abbiamo utilizzare i CSS per visualizzare il piè di pagina o di nasconderlo a seconda della presenza di quella classe :

#footershop 
{ 
    position: fixed; 
    height: 0px; 
    z-index:999; 
    bottom: 0; 
    overflow:none; 

    -moz-transition:all 0.5s ease-in-out; 
    -o-transition:all 0.5s ease-in-out; 
    transition:all 0.5s ease-in-out; 
    -webkit-transition:all 0.5s ease-in-out; 
} 
#footershop.show 
{ 
    height:35px; 

    -moz-transition:all 0.5s ease-in-out; 
    -o-transition:all 0.5s ease-in-out; 
    transition:all 0.5s ease-in-out; 
    -webkit-transition:all 0.5s ease-in-out; 
} 

Come potete vedere sopra quando la classe .show è sul footer cambiamo l'altezza dell'elemento piè di pagina per visualizzarlo. Le transizioni CSS vengono quindi utilizzate per animare questo cambiamento.

La cosa bella di questo metodo è che è molto leggero ed efficiente (specialmente se hai un sacco di animazioni jQuery che lavorano contemporaneamente) e puoi facilmente animare varie modifiche come opacità, testo e sfondo colori, ecc. senza dover toccare il tuo JS.

jsFiddle

Ecco la tua jsFiddle modificato http://jsfiddle.net/DigitalBiscuits/8PUa9/29/

Answer 4

Suggerirei solo mettendo un po 'di buffer inbetween vostro scorrimento verso l'alto e scorrere verso il basso il codice.

ho fatto un leggero tweak per il codice per mettere in un buffer di 100px:

Javascript

$(window).scroll(function() { 

    var distanceTop = $('#showfootershop').offset().top - $(window).height(); 

    if ($(window).scrollTop() >= distanceTop) { 
     $("#footershop").slideDown(); 
    } 
    else if ($(window).scrollTop() < (distanceTop - 100)) { 
     $("#footershop").slideUp(); 
    } 
}); 

Demo

Answer 5

Non sono sicuro di ciò che c'è di sbagliato con le altre risposte che non hai accettato, ma ecco la mia:

JSFiddle

JS:

$(window).scroll(function() { 

    var distanceTop = $('#showfootershop').offset().top - $(window).height(); 

    if ($(window).scrollTop() >= distanceTop - 20) { 
     $("#footershop").animate({ 
      'height': '35px' 
     }, 'fast'); 
    } 
    else { 
     $("#footershop").animate({ 
      'height': '0px' 
     }, 'fast'); 
    } 
});​ 

CSS:

#footershop { 
    height:0px; 
    width:100%; 
    z-index: 2; 
    background:#00ffff; 
    position: absolute; 
    bottom:0; 
    left:0; 
    overflow:hidden; 
} 
body { 
    position:relative; 
} 

Answer 6

Cercando di selezionare un elemento è troppo disordinato, basta usare la parte inferiore della pagina .

$(window).scroll(function() { 
    if ($(window).scrollTop() + $(window).height() == $(document).height()) { 
     $("#footershop").slideDown(); 
    } 
    else { 
     $("#footershop").slideUp(); 
    } 
});​ 

jsfiddle