cambiando la posición de un elemento css después de desplazarse hacia abajo en la página

Question

Estoy jugando con algunos jquery tratando de entenderlo.

Tengo un navegador ul que tiene una posición absoluta establecida pero después de desplazar la página hacia abajo en 200 píxeles, me gustaría que cambie a la posición fija para que el navegador siempre permanezca en la página.

¿Cómo podría hacer esto?

a continuación es el ejemplo que estoy trabajando en

http://satbulsara.com/tests/

Answer 1

Gracias a todos por ser tan rápido para ayudar

esto es lo que quería

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

lo tengo desde

http://www.defringe.com/

http://satbulsara.com/tests/

Thankss !! !!!

Answer 2

Aquí está el código que utilizo para crear una barra lateral "pegajosa". Tendrá que modificar los ID para que se adapten a su marcado.

 
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; 
}); 

Básicamente, todo lo que necesita hacer es cambiar el #sidebar para el ID del contenedor barra lateral. Este código verá si el elemento de la barra lateral se desplaza más allá de la parte superior de la pantalla. Si es así, cambia su posición a fixed, y cuando vuelve a estar en la página otra vez, la posición vuelve a static (predeterminado).

Las funciones $(document).resize() y $(window).resize() se asegurarán de que la barra lateral permanezca pegada en la parte superior de la página cuando el documento/ventana cambie de tamaño respectivamente. La función de documento asegurará que la barra lateral funcione correctamente incluso si tiene animaciones jQuery que cambian el tamaño de los elementos.

Answer 3

Escribí this jQuery plugin para hacer precisamente eso.