Tengo el header principal. Creo una clase para, mediante jquery, cambiar el color de fondo del header al hacer scroll. Y funciona. El problema surge cuando pienso: no quiero que todos los headers tengan el mismo estilo del principal y entonces le doy una id. Cambio las propiedades en el css (de header a #header) y lo mismo en el script de jquery. Y sorpresa: no funciona. Hice una prueba con el código básico, y es lo mismo. Al aplicar los estilos a la etiqueta, funciona. Al aplicarlos a la id, ya no.
ESTO FUNCIONA
Código HTML :
En el HTML:
<header> header </header>
En el CSS:
header {
height: 4.500em;
position: fixed;
background: #ffffff;
border-bottom: solid 0.063em #fff;
transition: all 0.4s ease-in-out;
}
.scroll-header {
background: #f3f3f3;
border-bottom: solid 0.063em #d2d2d2;
}
En el JQUERY:
$(window).scroll(function() {
if ($(this).scrollTop() > 80) {
$('header').addClass("scroll-header");
} else {
$('header').removeClass("scroll-header");
}
});ESTO NO FUNCIONA
Código HTML :
En el HTML:
<header id="header"> header </header>
En el CSS:
#header {
height: 4.500em;
position: fixed;
background: #ffffff;
border-bottom: solid 0.063em #fff;
transition: all 0.4s ease-in-out;
}
.scroll-header {
background: #f3f3f3;
border-bottom: solid 0.063em #d2d2d2;
}
En el JQUERY:
$(window).scroll(function() {
if ($(this).scrollTop() > 80) {
$('#header').addClass("scroll-header");
} else {
$('#header').removeClass("scroll-header");
}
});Como pueden ver, la única diferencia es que, aplico el código primero a la etiqueta y después a la ID, caso en el que no funciona.
Y entonces pregunto: ¿Cuál es el motivo? ¿Qué he pasado por alto?
De antemano, muchas gracias.
