Keep animated link styling with JS-CodePudding

I have used the following example to get an animated link underline effect on hover: https://tobiasahlin.com/blog/css-trick-animating-link-underlines/

This is working fine, however, I would like to have the underline remain while that section of the page is in view. I'm using the following JS code to add or remove the 'current' class to the appropriate nav element, and this works fine for something simple like changing the background-color:

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');
        }
    }
}

I'm unsure of how to just keep the underline that is produced by the following 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);
}

I've tried a few things but it just makes a mess of it all. Any ideas on how to get the underline to stay when the appropriate section is being targeted?

CodePudding user response：

All sorted with a simple change from:

nav div a:hover::before to nav div a:hover::before, nav div a.current::before

As suggested by @CBroe, thanks all

CodePudding user response：

Basically, all you need to do is add to the CSS rule that shows the line a classname that you assign when page is scrolled.

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>