Desarrolle un script que me posiciona un elemento según los tag Funciona bien pero quiero limitar el final osea cuando llega abajo y la resolución de la pantalla es inferior y no me monte el aside sobre section y footer....
El código
Código:
para que se entienda los tag: posicionarPublicidad(); $(window).scroll(function() { posicionarPublicidad(); }); function posicionarPublicidad() { var altura_del_header = $("header").outerHeight(true); var altura_del_aside = $("aside").outerHeight(true); var altura_del_section = $("section").innerHeight(true); if ($(window).scrollTop() > altura_del_header){ $("aside").addClass("fijo"); } else { $("aside").removeClass("fijo"); } }
header // cabecera cuando el usuario baja y pasa la cabecera el script agrega el class .fijo al tag aside
aside // contenido del cuadro de publicidad
section // este es el limite que le quiero dar al cuadro para cambiarlo luego por otra etiqueta class dependiendo si me pasa del limite el cuadro de publicidad
Para que se entienda el contenido del .fijo
Código:
Ahora lo e intentado así:.fijo{ position: fixed; }
Código:
// Llamado cuando se cargue la página posicionarPublicidad(); $(window).scroll(function() { posicionarPublicidad(); }); function posicionarPublicidad() { var altura_del_header = $("header").outerHeight(true); var altura_del_aside = $("aside").outerHeight(true); var altura_del_section = $("section").outerHeight(true); // probé también con innerHeight(true); if ($(window).scrollTop() > altura_del_header){ $("aside").addClass("fijo"); } else { $("aside").removeClass("fijo"); } // prueba 1<------ tanto menor como mayor if ($(window).scrollDown() < altura_del_section){ $("aside").removeClass("fijo"); $("aside").addClass("fijoDown"); } // pruebas 1 <------ // prueba 2<------tanto menor como mayor if ($(window).scrollTop() < altura_del_section){ $("aside").removeClass("fijo"); $("aside").addClass("fijoDown"); } // pruebas 2 <------ }
y por no dejar la estructura de la pagina seria así:
Código HTML:
************************* * <header></header> * ************************* ************* ********** * <contenido> * * * * <contenido> * * <aside> * * <contenido> * * * * <contenido> * * * ************* *********** ************************* * <section></section> * ************************* * <footer></footer> * *************************
Espero que se entienda....