Wednesday, 23 September 2020

How to not highlight every single link when navigating to a link after scrolling?

I have these links that work just fine when scrolling. My issue is that if I click on a single link (Example: Blog) just want to go straight to that link without having to travel to each link in order to make it to "Blog" link. Can someone point me in the right direction or tell me what I'm missing? Thanks a lot in advance!

Here is LIVE DEMO

window.addEventListener('scroll', event => {
  let navigationLinks = document.querySelectorAll('nav ul li a');
  let fromTop = window.scrollY;

  navigationLinks.forEach(link => {
    let section = document.querySelector(link.hash);

    if (
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop
    ) {
      link.classList.add('active');
    } else {
      link.classList.remove('active');
    }
  });
});

NOTE: I still want to keep the smooth scrolling functionality.



from How to not highlight every single link when navigating to a link after scrolling?

No comments:

Post a Comment