He usado el siguiente ejemplo para obtener un efecto de subrayado de enlace animado al pasar el mouse: https://tobiasahlin.com/blog/css-trick-animating-link-underlines/
Esto está funcionando bien, sin embargo, me gustaría que el subrayado permanezca mientras esa sección de la página está a la vista. Estoy usando el siguiente código JS para agregar o quitar la clase 'actual' al elemento de navegación apropiado, y esto funciona bien para algo tan simple como cambiar el color de fondo:
window.onscroll = function() { var navlinks = document.getElementsByTagName('nav')[0].getElementsByTagName('a'); var sections = document.getElementsByTagName('main')[0].getElementsByTagName('section'); for (var s = 0; s < sections.length; s++) { var sectTop = sections[s].offsetTop - 1; var sectBot = sections[s].offsetTop+sections[s].offsetHeight - 1; if (window.scrollY >= sectTop && window.scrollY < sectBot) { navlinks[s].classList.add('current'); } else { navlinks[s].classList.remove('current'); } } }No estoy seguro de cómo mantener el subrayado producido por el siguiente CSS:
nav div a::before { content: ""; position: absolute; display: block; width: 100%; height: 2px; bottom: 2vh; left: 0; background-color: #02081a; transform: scaleX(0); transition: transform 0.3s ease; } nav div a:hover::before { transform: scaleX(1); }He intentado algunas cosas, pero simplemente hace un lío de todo. ¿Alguna idea sobre cómo hacer que el subrayado permanezca cuando se orienta a la sección adecuada?
Todo ordenado con un simple cambio de:
nav div a:hover::before a nav div a:hover::before, nav div a.current::before
Como sugirió @CBroe, gracias a todos
Básicamente, todo lo que necesita hacer es agregar a la regla CSS que muestra la línea un nombre de clase que asigna cuando se desplaza la página.
window.onscroll = function() { var navlinks = document.getElementsByTagName('nav')[0].getElementsByTagName('a'); var sections = document.getElementsByTagName('main')[0].getElementsByTagName('section'); for (var s = 0; s < sections.length; s++) { var sectTop = sections[s].offsetTop - 1; var sectBot = sections[s].offsetTop+sections[s].offsetHeight - 1; if (window.scrollY >= sectTop && window.scrollY < sectBot) { navlinks[s].classList.add('current'); } else { navlinks[s].classList.remove('current'); } } } window.onscroll(); nav div a { position: relative; text-decoration: none; font-size: 24px; display: inline-block; } nav div a.current::before, nav div a:hover::before, nav div a::before { transform: scaleX(1); } nav div a::before { content: ""; position: absolute; display: block; width: 100%; height: 2px; bottom: 0; left: 0; background-color: red; transition: transform 0.3s ease; transform: scaleX(0); } nav div a:hover:not(.current)::before { background-color: green; } main { position: relative; top: 5vh; overflow: auto; } nav { position: fixed; top: 0; z-index: 1; background-color: white; width: 100%; } section { height: 150vh; border: 1px solid black; } <nav> <div> <a href="#section1">section 1</a> <a href="#section2">section 2</a> <a href="#section3">section 3</a> </div> </nav> <main> <section id="section1"><h1>my section 1</h1></section> <section id="section2"><h1>my section 2</h1></section> <section id="section3"><h1>my section 3</h1></section> </main>