I have an event listener and you can scroll on my webpage until window.scrollY is larger than 50. If you reach the 50 with window.scrollY, then you are only allowed to scroll upwards. If you are e.g. at 47 then you can scroll downwards to 50 again. I currently implemented it with window.scroll(0, 50); to prevent scrolling below 50, but if you try to scroll below 50 the webpage is jumpy/glitchy. Do you have any suggestions?

onScroll() {
  this.scrollPosition = window.scrollY;
  this.newValue = window.pageYOffset;
  if (window.scrollY > 50) {
    if (this.oldValue < this.newValue) {
      // Do not scroll below 50
      window.scroll(0, 50);
    }
  }
  this.oldValue = this.newValue;
}

Overview image As you can see in the image, there is an overlay menu. The menu appears on top of the contents after pressing an icon.