Currently, my webpage layout is divided into 4 sections - HOME, ABOUT, SKILLS, and CONTACT.
Below is the JavaScript code I am using to highlight a specific section on the navigation bar based on the scroll position:
let home = document.querySelector(".btn1")
let about = document.querySelector(".btn2")
let skills = document.querySelector(".btn3")
let contact = document.querySelector(".btn4")
function highlight(){
if(window.scrollY > 1)
{
home.classList.add("highlight")
}
if(window.scrollY > 550)
{
home.classList.remove("highlight")
about.classList.add("highlight")
}
else{
about.classList.remove("highlight")
}
if(window.scrollY > 1210)
{
skills.classList.add("highlight")
about.classList.remove("highlight")
}
else{
skills.classList.remove("highlight")
}
if(window.scrollY > 2050)
{
contact.classList.add("highlight")
skills.classList.remove("highlight")
}
else{
contact.classList.remove("highlight")
}
}
window.addEventListener("scroll", highlight);
Although this code works well on my 24" monitor, it becomes less accurate on larger screens like a 27". Are there any better ways to target each page section with scroll?