jQuery: Come mantenere un DIV nella parte superiore dello schermo E ripristinarne la posizione dopo averlo fatto scorrere verso l'alto (e aver raggiunto la sua posizione originale)

Question

Voglio un elemento div per fare qualcosa di simile a gmail.

• Quando si scorre verso il basso, una volta che il menu di gmail (Archivia, Spam, Elimina, ecc ...) raggiunge la parte superiore dello schermo, rimane lì.

• Durante lo scorrimento, il menu torna alla posizione originale.

Un altro campione è la barra laterale di questa pagina: sample 2

come realizzare che con un semplice (e facile da capire) codice jQuery? (compatibile con tutti i browser)

<div id="header">Menu goes here =)</div> 

Answer 1

Odio collegare il mio blog, ma ho risolto questo problema esatto in un post. http://www.dittocode.com/how-to-emulate-gmails-floating-menu-bar-with-jquery/

specifico al tuo problema, provate questo:

CSS:

#header.floating { 
    position: fixed; 
    top: 0; 
} 

JavaScript:

$(document).ready(function() { 

    $(window).scroll(function() { 
     if ($(window).scrollTop() > $('#header-wrapper').offset().top) 
      $('#header').addClass('floating'); 
     else 
      $('#header').removeClass('floating'); 
    }); 

}); 

jsFiddle: http://jsfiddle.net/omarjuvera/0p9p43Lz/

Answer 2

si può provare questo:

<script> 
var name = "#floatMenu"; 
var menuYloc = null; 
$(document).ready(function(){ 
     menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) 
     $(window).scroll(function() { 
      offset = menuYloc+$(document).scrollTop()+"px"; 
      $(name).animate({top:offset},{duration:1000,queue:false}); 
     }); 
}); 
</script> 

E alcuni CSS per il DIV galleggiante chiamato floatMenu:

#floatMenu { position:relative; width:100%px; top:0px; left:0px; } 

E un DIV che galleggia:

<div id="floatMenu">Your content</div> 

ma non e 'del tutto ottenuto lo stesso effetto come l'esempio si ci ha dato. Questo è animato e ti insegue sullo schermo ...

Answer 3

Un modo migliore per farlo è usare i waypoint jQuery. Si prega di dare un'occhiata a questo sticky-elements example

Inoltre, ecco la sezione getting started per il plugin waypoint.

Come si può vedere quando si scorre verso il basso, il menu si attacca allo schermo superiore.

Spero che questo sia utile.