JavaScript: Trying to find a way on how to refresh my div.offsetTop values when window is resized

user_17153583 0
Viewed 44

Below is my code that highlights a category in the nav-bar once a specific div's offsetTop is reached by scrolling through the webpage.

  let page1 = document.querySelector(".A").offsetTop
  let page2 = document.querySelector(".B").offsetTop
  let page3 = document.querySelector(".C").offsetTop
  let page4 = document.querySelector(".D").offsetTop

  let home = document.querySelector(".home")
  let about = document.querySelector(".about")
  let contact = document.querySelector(".contact")
  let random = document.querySelector(".random")

  window.addEventListener("scroll", function(){
    /* ---------------------------------------- PAGE 1 */
    if(window.scrollY > 1)
    {
      home.classList.add("highlight");
    }
    /* ---------------------------------------- PAGE 2 */
    if(window.scrollY > page2 - 100){
      about.classList.add("highlight")
      home.classList.remove("highlight");
    }
    else{
      about.classList.remove("highlight")
    }
    /* ---------------------------------------- PAGE 3 */
    if(window.scrollY > page3 - 100){
      contact.classList.add("highlight")
      about.classList.remove("highlight")
    }
    else{
      contact.classList.remove("highlight")
    }
    /* ---------------------------------------- PAGE 4 */
    if(window.scrollY > page4 - 100){
      random.classList.add("highlight")
      contact.classList.remove("highlight")
    }
    else{
      random.classList.remove("highlight")
    }
  });

Screenshot [1]: https://i.stack.imgur.com/VamWP.png

My issue is the offsetTop values do not reset to their new values when window is being resized, unless I refresh browser! Only then does it become accurate again during scroll.

I heard that window.onresize could help but I cant seem to find the right way to add it with my code.

Thank you in advance!

css javascript
1 Answers

offsetTop is assigned to variables (page1, page2, page3, page4) only on load, that's why even when you resize window it has old values. Move your values reading offset inside scroll handler, then it will assign correct values every time you scroll

let home = document.querySelector(".home")
let about = document.querySelector(".about")
let contact = document.querySelector(".contact")
let random = document.querySelector(".random")

window.addEventListener("scroll", function(){
let page1 = document.querySelector(".A").offsetTop
let page2 = document.querySelector(".B").offsetTop
let page3 = document.querySelector(".C").offsetTop
let page4 = document.querySelector(".D").offsetTop

/* ---------------------------------------- PAGE 1 */
if(window.scrollY > 1)
{
  home.classList.add("highlight");
}
/* ---------------------------------------- PAGE 2 */
if(window.scrollY > page2 - 100){
  about.classList.add("highlight")
  home.classList.remove("highlight");
}
else{
  about.classList.remove("highlight")
}
/* ---------------------------------------- PAGE 3 */
if(window.scrollY > page3 - 100){
  contact.classList.add("highlight")
  about.classList.remove("highlight")
}
else{
  contact.classList.remove("highlight")
}
/* ---------------------------------------- PAGE 4 */
if(window.scrollY > page4 - 100){
  random.classList.add("highlight")
  contact.classList.remove("highlight")
}
else{
  random.classList.remove("highlight")
}
});

Alternatively as you mentioned you can update values on resize event:

let page1 = document.querySelector(".A").offsetTop
let page2 = document.querySelector(".B").offsetTop
let page3 = document.querySelector(".C").offsetTop
let page4 = document.querySelector(".D").offsetTop

let home = document.querySelector(".home")
let about = document.querySelector(".about")
let contact = document.querySelector(".contact")
let random = document.querySelector(".random")

// RESIZE EVENT
window.addEventListener('resize', () => {
  page1 = document.querySelector(".A").offsetTop
  page2 = document.querySelector(".B").offsetTop
  page3 = document.querySelector(".C").offsetTop
  page4 = document.querySelector(".D").offsetTop
});

window.addEventListener("scroll", function(){
/* ---------------------------------------- PAGE 1 */
if(window.scrollY > 1)
{
  home.classList.add("highlight");
}
/* ---------------------------------------- PAGE 2 */
if(window.scrollY > page2 - 100){
  about.classList.add("highlight")
  home.classList.remove("highlight");
}
else{
  about.classList.remove("highlight")
}
/* ---------------------------------------- PAGE 3 */
if(window.scrollY > page3 - 100){
  contact.classList.add("highlight")
  about.classList.remove("highlight")
}
else{
  contact.classList.remove("highlight")
}
/* ---------------------------------------- PAGE 4 */
if(window.scrollY > page4 - 100){
  random.classList.add("highlight")
  contact.classList.remove("highlight")
}
else{
  random.classList.remove("highlight")
}
});
user_30753730
Related