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