how could I adjust this so that it fits multiple elements on the same html page (applyind different paddings to them?) Thank you so much!

const navbar = document.getElementById('scroll-card-top')
    const onScroll = () => {
      const scroll = document.documentElement.scrollTop
      if (scroll > 1000) {
        navbar.classList.add("scrolled");
      } else {
        navbar.classList.remove("scrolled")
      }
    }
    window.addEventListener('scroll', onScroll)`