estoy haciendo un menú fijo el cual al hacer scroll este cambia de color de fondo, lo he logrado con jquery pero quiero hacerlo con javascript puro ya que a manera de ejercicio quiero saber como hacerlo, ya lo he intentando y no logro que el efecto se logre.
este es el código jquery:
$(window).on('scroll', function(){
if ($(window).scrollTop()){
$('nav').addClass('blue');
}else{
$('nav').removeClass('blue');
}
});
y esto es hasta ahora lo que e hecho con javascript puro:
var sticky = document.querySelector('.contenido nav');
sticky.addEventListener("scroll", function(){
if (sticky.scrollTop){
sticky.style.className = "blue";
}else{
sticky.classList.remove('blue');
}
});
utilizó la variable sticky para seleccionar la etiqueta nav que se encuentra dentro de una etiqueta div con clase contenido, cuando hago scroll se le asigna la clase blue, no se si ahi radica mi error en que no se le está asignado bien la clase o el evento scroll no se esta empleando bien. Ojala me puedan ayudar.
dejo el codigo en codepen de lo que quiero lograr.
window
. En tu versión alternativa, debiera también estar asignado alwindow
, creo.