Is there a way to hide an element when scrolling down & show the element again while scrolling up?

Question

I have a blockquote that has a position:absolute: this way it says where it is. While scrolling it hides behind another div, the problem is that on some mobile phones the blockquote peaks out from underneath said div.

Is there a way that I can put the blockquote on display:none; when scrolling past 500px and put if back to display:block: when scrolling back up?

Answer 1

<script>
window.addEventListener('scroll', function(e) {
  if(window.scrollY>=500){
    document.getElementById("IDOFELEMENTTOHIDE").setAttribute("class", "displayNone ORIGINALCLASSES");
  }else{
    document.getElementById("IDOFELEMENTTOHIDE").setAttribute("class", "displayBlock ORIGINALCLASSES");
  }
});
</script>

Replace IDOFELEMENTTOHIDE with the elements id, if it doesn't have one, give it one with <div id="id"></div>. Replace ORIGINALCLASSES with the classes the element had before, if it had none you can safely remove it.

Then add this.

<style>
.displayNone{
    display:none;
}
.displayBlock{
    display:block;
}
</style>