Actualmente estoy usando el siguiente:

http://jsfiddle.net/0mLzseby/469/

A hacer mi barra lateral siga hacia abajo en la página. Yo tengo un gran pie de página, y aunque me gustaría que el div que se detenga cuando se llega al pie de página, en vez de desplazamiento.

El código que tengo actualmente es:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});
  • esto es de trabajo, pero tenemos que darle fix a la altura de la pegajosa div. sin altura no va a funcionar
InformationsquelleAutor BN83 | 2016-02-26

4 Comentarios

  1. 11

    Usted puede comprobar si has desplazado hacia abajo al pie de página, a continuación, retire la stick clase:

    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var footer_top = $("#footer").offset().top;
        var div_top = $('#sticky-anchor').offset().top;
        var div_height = $("#sticky").height();
    
        if (window_top + div_height > footer_top)
            $('#sticky').removeClass('stick');    
        else if (window_top > div_top) {
            $('#sticky').addClass('stick');
        } else {
            $('#sticky').removeClass('stick');
        }
    }

    (se puede combinar el si para eliminar los duplicados .removeClass, aquí para la demostración)

    Sin embargo, con su css de obtener una desagradable ‘salto’ a su alrededor cuando usted comience a desplazarse en su violín, el derecho contenido aparece debajo de #pegajosa, a continuación, cuando usted se pega #pegajosa, el derecho contenido saltos para llenar el vacío. Utilizando el código anterior, usted conseguirá algunos de carrera-condiciones como el offset() se mueve cuando se llena/unfills la brecha.

    Para solucionar esta brecha, sólo tiene que añadir un float:left a su #pegajosa css.

    Actualizado violín: http://jsfiddle.net/0mLzseby/472/


    Sospecho que a usted le gusta ir un paso más allá y, al llegar a la parte inferior, el div, a continuación, comienza a desplazarse con la página. Usted puede hacer esto mediante el ajuste de la posición:se ha corregido la parte superior de .stick. No se olvide de reiniciar cuando no debajo del pie de página:

    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var footer_top = $("#footer").offset().top;
        var div_top = $('#sticky-anchor').offset().top;
        var div_height = $("#sticky").height();
    
        var padding = 20;  //tweak here or get from margins etc
    
        if (window_top + div_height > footer_top - padding)
            $('#sticky').css({top: (window_top + div_height - footer_top + padding) * -1})
        else if (window_top > div_top) {
            $('#sticky').addClass('stick');
            $('#sticky').css({top: 0})
        } else {
            $('#sticky').removeClass('stick');
        }
    }

    El relleno sólo hace que se comience a desplazarse de una forma más natural del lugar – usted probablemente puede obtener esta información de otros atributos css como el margen y el relleno de los otros componentes.

    Actualizado violín: http://jsfiddle.net/0mLzseby/473/

    • Perfecto gracias. Tuvo que hacer algunos ajustes a la hora de poner en la página final, pero este ha hecho el truco de manera brillante. Marcado como respondido, gracias!
  2. 1

    Usted se olvidó de agregar la clase, si estamos en el pie de página, y refrech la página, a continuación, la barra lateral no show :

    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var footer_top = $("#footer").offset().top;
        var div_top = $('#sticky-anchor').offset().top;
        var div_height = $("#sticky").height();
    
        var padding = 20;  //tweak here or get from margins etc
    
        if (window_top + div_height > footer_top - padding) {
            $('#sticky').addClass('stick'); ////////here is to get fixed when we refrech page when we are in the footer
            $('#sticky').css({top: (window_top + div_height - footer_top + padding) * -1})
    }     else if (window_top > div_top) {
            $('#sticky').addClass('stick');
            $('#sticky').css({top: 0})
        } else {
            $('#sticky').removeClass('stick');
        }
    }
  3. 0

    Usted puede comprobar si has desplazado hacia abajo agregar el pegajoso de la clase y cuando se ha de desplazamiento a pie de página y encabezado de la zona será quitar pegajosa clase

    function Stickyheaderfooterbar() {
            var windowTop = jQuery(window).scrollTop();
            var footerTop = jQuery(".footer").offset().top - 498;
            var stickydivTop = jQuery('#sticky-anchor').offset().top;
            var stickydivHeight = jQuery("#sticky").height();
            console.log('footer' + footerTop);
            console.log('stickydivTop' + stickydivTop);
            console.log('stickydivHeight' + stickydivHeight);
            console.log('windowTop' + windowTop);
            if (windowTop + stickydivHeight > footerTop)
                jQuery('#sticky').removeClass('stick');
            else if (windowTop > stickydivTop) {
                jQuery('#sticky').addClass('stick');
            } else {
                jQuery('#sticky').removeClass('stick');
            }
        }
  4. 0

    Esto se puede lograr sin el uso de javascript position: sticky.

    Actualizado violín: http://jsfiddle.net/p1gku0mx/3/

    La clave es envolver el pegajoso elemento en otro div. Desde el pegajoso elemento no se puede mover fuera de su contenedor div se consigue desplazar hasta cuando el pie entra en la vista.

Dejar respuesta

Please enter your comment!
Please enter your name here