• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

131
Views
how to highlight navigation bar while scrolling

I have this basic HTML code which has sections, and then I created a basic navigation bar dynamically by javaScript

function buildNav() {
    for (section of sections) {
        let item = document.createElement("li");

        item.innerHTML = `<a data-nav="${section.id}">${section.dataset.nav}</a>`;
        item.classList.add("item");
}
        navBar.appendChild(item);
        
    }
}

and I used this function to add active class to each section

function isInView(element) {
    const rect = element.getBoundingClientRect();
    return rect.top >= -70 && rect.top <= 300;
};

function addActive() {
    document.addEventListener(
        "scroll",
        () => {

            for (section of sections) {
                if(isInView(section)){
                    section.classList.add('active')
                }else{section.classList.remove('active')}
             };
            })
            }

my question is how can I highlight the item at the navigation bar that represents the section in view

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You should apply active class to only the item that matches the current section of the page. Try this: -

function isInView(element) {
    const rect = element.getBoundingClientRect();
    if(rect.top > 70 && rect.top < 150){            //Assumed Y-offset for 1st section
        return element.id          //Assuming it returns 1 for 1st element
    }
    else if(rect.top > 150){
        return element.id          //Returns 2 for 2nd element
    }
   
};

function addActive() {
    document.addEventListener(
        "scroll",
        () => {

            for (section of sections) {
                if(isInView(section) == section.id){
                    section.classList.add('active')    //Only apply active class to this section
                }
                else{
                    section.classList.remove('active')  //Remove the active class from all other sections
                }
            };
               
            
            })
            }
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error