¿Cómo hacer que un div siga el scroll de la página hasta el final del contenedor?

Vzk91 dijo:

Hola

Vereis ando atascado en un punto en el que ya no se que probar. Necesito que un div siga el scroll de la página, pero como máximo hasta el final del div contenedor. Cuando llegue al final del div contenedor el div se quedará al fondo.

Para que se vea un poco más grafico os he hecho este ejemplo:

Edit fiddle - JSFiddle

Cada div "elemento" contiene su propio div "fixed" y este div "fixed" esta posicionado en el top de su respectivo div "elemento". Cuando hago scroll en la pagina, el primer div "fixed" empieza a descender, y cuando llega al final del div (la raya negra) se detiene y comienza a descender el siguiente div "fixed" del siguiente div "elemento".

El problema que tengo es que el posicionamiento fixed toma como referencia toda la pagina, y no se como lograr ese mismo efecto tomando como referencia el contenedor.

Espero que me haya explicado lo suficientemente claro jeje

un saludo !!

Hacer clic para expandir...

document.documentElement.clientHeight; /*Generalizado*/
window.innerHeight; /*Para el tocapelotas de IE*/
document.body.clientHeight; /*Como CocaCola, "Para los deportistas, para los altos, para los bajos..."*/

$(window).scroll(function() {
			if ($(this).scrollTop() == varHeight){
                                    $('elementoQue').removeClass("fixed");
                                    $('elementoQue').addClass("absolute");
                        }
		});

.absolute{
 position:absolute;
 bottom:200px;
 right:50px;
}

hanschrome dijo:

Lo que tú quieres hacer se puede hacer con JQuery, primero, como veo que quieres hacerlo al revés que todo el mundo (Que suele querer que el encabezado se quede arriba y luego baje), tendrás que medir el alto de la página con JS.

Insertar CODE, HTML o PHP:

document.documentElement.clientHeight; /*Generalizado*/
window.innerHeight; /*Para el tocapelotas de IE*/
document.body.clientHeight; /*Como CocaCola, "Para los deportistas, para los altos, para los bajos..."*/

Luego tendrás que comprobar que el scroll de la página de diferencia hacia arriba sea ese número, para ello usamos JQuery.

Insertar CODE, HTML o PHP:

$(window).scroll(function() {
			if ($(this).scrollTop() == varHeight){
                                    $('elementoQue').removeClass("fixed");
                                    $('elementoQue').addClass("absolute");
                        }
		});

En este código se eliminará la clase fixed cuando llegue abajo del todo y cambiará a la clase posición absoluta, en la cual tendrás que poner las coordenadas correspondientes. (Si quieres que al subir vuelva a ser fixed, tendrás que añadirle un "else" a la condición, que el devuelva la clase "fixed")
Por ejemplo:

Insertar CODE, HTML o PHP:

.absolute{
 position:absolute;
 bottom:200px;
 right:50px;
}

Si lo quieres hacer más exacto, setea el parámetro Style con los datos calculados por Javascript del alto de la ventana por resolución y todo eso, pero si quieres eso tendrás que buscarte tú la vida 😉.

Espero haber sido de ayuda.

Hacer clic para expandir...