1 votos

Scroll Height editar estilo Javascript

Estoy creando un script en javascript para que a la hora que la gente baje el scroll hasta cierto punto mi div parezca estático aquí les dejo el link para que vean el ejemplo: enter image description here

Hasta llegar al height del footer y comienza a disminuir el TOP: enter image description here

El problema esta en que si comparan este link: primer ejemplo con este otro: segundo ejemplo verán que no funciona de la misma manera aquí les dejo el script:

$(document).ready(function(){

var scroll;
var totalscroll;
totalscroll=$('body').prop('scrollHeight');
heightfooter=$('.footer').prop('scrollHeight');

$(window).scroll(function(){
    scroll = $(window).scrollTop();

    if(scroll>1){
        if(scroll<40){
            $(".property .user-details").css({"top": (110-scroll)+"px"});
        }else{
            if(scroll>(totalscroll-heightfooter)){
                $(".property .user-details").css({"top": "-"+(scroll-700)+"px"});
            }else{
                $(".property .user-details").css({"top": "70px"});
            }
        }
    }else{
        $(".property .user-details").css({"top": "110px"});
    }
});});

Porfavoor ayúdenme con esto que me tiene muy cabezon!!

0 votos

El problema es que en ocasiones se te mete encima del footer, ¿verdad? Es lo único raro que he visto.

0voto

aEscarcha Puntos 220

Es raro lo que te pasa, podría ser porque después del document.ready la altura del documento y del footer cambie, por ejemplo por widgets como el de Facebook y Twitter que se cargan después, quizá si lo recalculas dentro del evento scroll te funcione mejor.

Además de eso, te recomiendo que cuando esté fijo le pongas un z-index superior al del footer, y un background-color igual al del fondo de la web, con un poco de padding, de esa forma si pasa no quedará tan feo.

0 votos

XD, aEscarcha, sos mi usuario favorito de iteramos.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: