Tengo un sitio web ( https://lunarcreator.uk ). Creé una barra de navegación para él que cambia más allá de un cierto desplazamiento y (> & <100) para que quede claro en el fondo y el contenido durante el desplazamiento.
Tengo el siguiente javascript para hacer esto:
const logo = document.querySelector('#pronav') const about = document.querySelector('#about') const log_text = document.querySelector('#log_text') const link1 = document.querySelector('#link1') const link2 = document.querySelector('#link2') const link3 = document.querySelector('#link3') const getOffset = () => { if(window.pageYOffset > 100){ logo.style.backgroundColor = 'white'; logo.style.transition = 'background .2s ease-out'; log_text.style.color = 'black'; link1.style.color = 'black'; link2.style.color = 'black'; link3.style.color = 'black'; } if(window.pageYOffset < 100){ logo.style.backgroundColor = 'rgba(0,0,0,0)'; logo.style.transition = 'background .2s ease-out'; log_text.style.color = 'white'; link1.style.color = 'white'; link2.style.color = 'white'; link3.style.color = 'white'; } } window.addEventListener('scroll', getOffset)el const link_n se refiere a la etiqueta a específica en la barra de navegación. Sin embargo, al agregar este cambio en el desplazamiento, perdí la funcionalidad de las etiquetas a que tienen un efecto de desplazamiento en el desplazamiento. He intentado especificar el desplazamiento en css usando :hover pero esto no funciona. ¿Cómo podría arreglar eso?
Gracias por tu tiempo. (Tengo muy poco conocimiento de javascript, así que creo que este fue el mejor lugar para buscar respuestas)
Sería mucho mejor simplemente agregar clase a su encabezado después de desplazarse.
let header = document.querySelector('.header'); const getOffset = () => { if(window.pageYOffset > 100){ header.classList.add('fixed'); } else { header.classList.remove('fixed'); } } window.addEventListener('scroll', getOffset)Y luego edite estilos basados en la clase de encabezado.
.header a { color: #FFF; } .header.fixed { background: #fff; } .header.fixed a { color: #000; } .header.fixed a:hover { color: blue; }Aquí está el violín: https://jsfiddle.net/oLtvjwhe/
Editar: ¡Evite usar! Importante que sugirió Allan.
Incluso w3schools lo dice en la parte inferior "Consejo: es bueno conocer la regla !importante, es posible que la vea en algún código fuente CSS. Sin embargo, no la use a menos que sea absolutamente necesario". ¡Y en este caso no necesitas !importante.
Use el CSS La regla importante https://www.w3schools.com/css/css_important.asp
Me gusta:
.menu a:hover, .show-menu-btn:hover, .hide-menu-btn:hover { color: #AEC6CF !important; }Espero que funcione.
considere apuntar a la clase principal #pronav . Luego, simplemente agregue una clase de fade-to-white :
const FADE_TO_WHITE = 'fade-to-white' const pronav = document.querySelector('#pronav') const getOffset = () => { window.pageYOffset > 100 ? pronav.classList.add(FADE_TO_WHITE) : pronav.classList.remove(FADE_TO_WHITE) }luego apunte a los niños con css:
#pronav.fade-to-white a { color: black; } #pronav a { color: white; } #pronav.fade-to-white a:hover { color: blue; /* change this */ } /* continue like this */