Hide an element on scroll

Site URL: https://www.chateaudefarcheville.com/en/home

Hello!

I'm not super good with coding but I have an idea of what I want to do with a component that I want to add on to my clients website (only on mobile so with media query). It's basically just hiding the component on scroll down, reveal when on top of the page (or when scrolling up)

Thanks in advance!

Screenshots coming here

I saw you used a scroll based event here, please find and replace it with below

<script>
  $(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > 50){
    $('.language').addClass('scrollHidden');
    $('.Header').addClass('scrollNav');
  }
  else{
    $('.language').removeClass('scrollHidden');
    $('.Header').removeClass('scrollNav');
  }
});
</script>

And custom css for it

@media only screen and (max-width: 600px) {
  .language {
    transition: top .5s;
  }
  .language.scrollHidden {
    top: -10px;
  }
}