scrollIntoView on position:sticky only working in one direction

I have a navbar that scrolls (using scroll-behaviour: smooth) the required section of the website into view using this javascript:

    for (const liItem of navList) {
      liItem.onclick = () => {
        document.getElementById(liItem.getElementsByTagName('a')[0].dataset.target).scrollIntoView();
      };
    }

Tested on Chrome 112.0.5615.49 (ARM build) and Safari 16.3 it works exactly as expected on position: relative divs (Behaviour: http://miserylovescompanyfestival.co.uk/). Using position: sticky for the targeted elements results in scrollIntoView only working for elements later in the DOM tree than the currently visible element (Behaviour: https://theexactopposite.uk/test/index-card.html – using the menu it is possible to scroll down to ‘Upcoming Shows’ but not scroll back up to ‘About Us’ from there).

This is the css for the position: sticky element:

.card {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

I have looked at the other questions regarding scrollIntoView and position: sticky here, but none seem to have had this specific issue. How can I get scrollIntoView to work in both directions?