I have this Div that shows up on button click and then lies over some other content, where the button to show the content lies too. I want to hide this div again by scrolling. I have some code which works, but only with limitations which makes it unusable.

I tried the following code:

  $(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    $('.hidden-content').fadeOut();
  }
});

This actually works but here is the problem: The button I use to show the content does not work anymore while hover-animations in this div still works everywhere. So I do not think this is a problem about a hidden div with a high z-Index value what lies above of everything.

I also tried the following code based on some help of the user Ned Hulton for hiding this div on a button click which worked perfectly fine, but I didn't get the translation for the scroll event right as it seems.

$(window).scroll(function() {
   if ($(this).scrollTop() > 100) {
        $('.hidden-content').animate({"opacity":"0"}, function(){
        $(this).css({"zIndex":"-1"})
});
});

And maybe it will also help if I show you the code to make the div appear by a click on a button:

$('.clickable-content').click(function(e) {
      $('.hidden-content').css({
        "opacity":"1",
        "z-index": "9"
        });
    });

Hope someone can help me out! Thak you for reading!