Foros del Web » Programando para Internet » Javascript »

Posicionar elemento flotante segun el tag

Estas en el tema de Posicionar elemento flotante segun el tag en el foro de Javascript en Foros del Web. Hola saludos a todos a ver que esto me tienen rascándome la cabeza y no lo consigo explico: Desarrolle un script que me posiciona un ...
  #1 (permalink)  
Antiguo 25/09/2014, 18:51
Avatar de Titos  
Fecha de Ingreso: agosto-2002
Mensajes: 116
Antigüedad: 22 años, 3 meses
Puntos: 3
Posicionar elemento flotante segun el tag

Hola saludos a todos a ver que esto me tienen rascándome la cabeza y no lo consigo explico:

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:
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");
    }

}
para que se entienda los tag:
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:
	
.fijo{
	position: fixed;
}
Ahora lo e intentado así:

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>           *
*************************
Como verán el aside flota de arriba abajo lo que quiero es limitar el final.

Espero que se entienda....
__________________
Saludos a Tod@s... :adios:

Etiquetas: elemento, flotante, tag
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:58.