I have a popup set to display once the user scrolls to a specific section on my page, however, if I reload the page, the page does not scroll all the way back to the top, immediately triggering the popup again on refresh.

Is there a conditional I can use to make sure this popup displays only when the user is starting from the top of the page? I don't like the way it automatically shows on a refresh if the scrollY is already passed the given section.

const section = document.querySelector('#section-1');
const card = document.querySelector('#card-popup');
const closebtn = document.querySelector('#close-popup');
let flag = false;


const cardPop = ()=>{
  const topOfSection = section.offsetTop;
  console.log(topOfSection);
  if (window.scrollY >= topOfSection && !flag) {
    card.style.display = "block";
    flag = true;
  }

  closebtn.addEventListener('click', (e) =>{
    card.style.display = "none";
  });
}

window.addEventListener('scroll', cardPop);