Javascript for nav onscroll active highlighting

Favour Ikechukwu uwadiegwu answered on July 22, 2023 Popularity 1/10 Helpfulness 1/10

answer Javascript for nav onscroll active highlighting

Javascript for nav onscroll active highlighting

Comment

let sections = document.querySelectorAll('section');
let stickyNav = document.querySelectorAll('.sticky-nav ul li a');

console.log(stickyNav);

window.onscroll = () => {
  sections.forEach(sec => {
    let top = window.scrollY;
    let offset = sec.offsetTop;
    let height = sec.offsetHeight;
    let id = sec.getAttribute('id');

    if (top >= offset && top < offset + height) {
      stickyNav.forEach(links => {
        links.classList.remove('active');
        document.querySelector('.sticky-nav ul li a[href*=' + id + ']').classList.add('active');
      });
    }
  });
};

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: highlighting javascript nav onscroll

Link to this answer
Share Copy Link

Contributed on Jul 22 2023

Favour Ikechukwu uwadiegwu

0 Answers Avg Quality 2/10

Javascript for nav onscroll active highlighting

Contents

More Related Answers

Javascript for nav onscroll active highlighting

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.