[Pregunta]: ¿Cuál es la formula correcta?

[Leguim]

Estoy tratando de hacer un sidebar "pegajoso/sticky" pero la siguiente formula como que no me funciona del todo bien, en un principio si funciona bien pero se estropea si al documento se le agregan nuevos elementos (append) es decir, la altura de la página aumenta entonces se me estropea...

Código (javascript) [Seleccionar] Expandir


if($(this).scrollTop() > $('.sidebar_nav_left').offset().top - $(window).scrollTop())
{
         // le agrego al sidebar un estilo de position "fixed" para hacer el efecto de sticky
         // y modifico el marginTop del sidebar a "-45px"
}
else
{
        // le agrego al sidebar un estilo de position "relative" para hacer el efecto de que se despegó ya que llegó nuevamente arriba de todo.
}


Pero como dije esta formula tiene ese problema, y no soy muy bueno para estas cosas...

[Drakaris]

Buenas, creo que estas buscando algo como esto? Este trozo de código es de un menu horitzontal que cuando haces scroll hacia abajo, se adhiere arriba de la página.

(jQuery)

Código (jquery) [Seleccionar] Expandir


var altura = $('.menu').offset().top;
    $(window).on('scroll', function(){
        if ( $(window).scrollTop() > altura ){
            $('.menu').addClass('menu-fixed');
        } else {
            $('.menu').removeClass('menu-fixed');
        }
    });


La idea es la siguiente:

Código (jquery) [Seleccionar] Expandir

var altura = $(".menu").offset().top
la variable altura, obtiene la altura de posición donde esta el menú

Código (jquery) [Seleccionar] Expandir

$(window).on('scroll', function(){
Después de obtener la altura del objeto (del menu), vamos a hacer eventListener del scroll, en jquery es con la funcion on().

Código (jquery) [Seleccionar] Expandir


        if ( $(window).scrollTop() > altura ){
            $('.menu').addClass('menu-fixed');
        } else {
            $('.menu').removeClass('menu-fixed');
        }

dentro del listener, vamos a hacer una condicional, que, cuando la altura del scroll ($(window).scrollTop()) sea mayor a la altura del menú. Este me añada la clase menu-fixed a la etiqueta con la clase .menu. Por lo contrario me va a eliminar la clase menu-fixed.

Si el scrollTop() es mayor que la altura del menu eso significa que estoy haciendo scroll hacia abajo, así que aplica la clase.

Aquí estoy usando Jquery http://g-t-e.260mb.net/plugins/jquery-lastest.js

Código (css) [Seleccionar] Expandir


.menu-fixed {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 1000%;
    box-shadow: 0px 4px 3px rgba(0,0,0,.5);
}


Espero haberte ayudado. Suerte

[Leguim]

Hola!

Si, el código funcionaba bien lo que pasó fue que en otra parte de la aplicación estaba eliminando el evento del scroll entonces era eso lo que me daba problemas, ahora todo funciona como esperaba.

Gracias!!