cambiando una posizione css degli elementi dopo aver scostato la pagina

Question

Sto scherzando con un po 'di jquery cercando di fare i conti con esso.

Ho un browser che ha una posizione assoluta impostata, ma dopo aver fatto scorrere la pagina verso il basso di 200 pixel mi piacerebbe che per passare alla posizione fissa in modo che il navigatore rimanga sempre sulla pagina.

Come faccio?

sotto è l'esempio sto lavorando su

http://satbulsara.com/tests/

Answer 1

Grazie a tutti per essere così veloce per aiutare

Questo è quello che volevo

$(document).ready(function() { 
    var theLoc = $('ul').position().top; 
    $(window).scroll(function() { 
     if(theLoc >= $(window).scrollTop()) { 
      if($('ul').hasClass('fixed')) { 
       $('ul').removeClass('fixed'); 
      } 
     } else { 
      if(!$('ul').hasClass('fixed')) { 
       $('ul').addClass('fixed'); 
      } 
     } 
    }); 
}); 

ho presa da

http://www.defringe.com/

http://satbulsara.com/tests/

Thankss !! !!!

Answer 2

Ecco il codice che uso per creare una barra laterale "appiccicoso". Dovrai modificare gli ID per adattarli al tuo markup.

 
var sidebarScrollTop = 0; 

$(document).ready(function() { 
    sidebarScrollTop = $("#sidebar").offset(); 

    $(window).scroll(function() { 
     var docScrollTop = $('body,html').scrollTop(); 

     if(docScrollTop > sidebarScrollTop.top) { 
      $("#sidebar").css({ position: 'fixed', top: '0px' }); 
     } else { 
      $("#sidebar").css({ position: 'static' }); 
     } 
    }); 
}); 

$(window).resize(function() { 
    sidebarScrollTop = $("#sidebar").offset().top; 
}); 

$(document).resize(function() { 
    sidebarScrollTop = $("#sidebar").offset().top; 
}); 

In sostanza, tutto quello che dovete fare è cambiare la #sidebar per l'ID del contenitore barra laterale. Questo codice vedrà se l'elemento della barra laterale scorrerà oltre la parte superiore dello schermo. In caso affermativo, modifica la sua posizione su fixed e, quando ritorna alla pagina, la posizione viene restituita a static (impostazione predefinita).

Le funzioni $(document).resize() e $(window).resize() assicurano che la barra laterale rimanga attaccata nella parte superiore della pagina quando il documento/finestra viene ridimensionato rispettivamente. La funzione del documento assicurerà che la barra laterale funzioni correttamente anche se le animazioni jQuery cambiano la dimensione degli elementi.

Answer 3

Ho scritto this jQuery plugin per fare proprio questo.