Tengo este Div que aparece al hacer clic en el botón y luego se encuentra sobre otro contenido, donde también se encuentra el botón para mostrar el contenido. Quiero ocultar este div nuevamente desplazándome. Tengo un código que funciona, pero solo con limitaciones que lo hacen inutilizable.

Probé el siguiente código:

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

Esto realmente funciona, pero aquí está el problema: el botón que uso para mostrar el contenido ya no funciona, mientras que las animaciones flotantes en este div todavía funcionan en todas partes. Por lo tanto, no creo que esto sea un problema sobre un div oculto con un valor de índice z alto que se encuentra por encima de todo.

También probé el siguiente código basado en la ayuda del usuario Ned Hulton para ocultar este div al hacer clic en un botón que funcionó perfectamente bien, pero no obtuve la traducción para el evento de desplazamiento como parece.

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

Y tal vez también ayude si te muestro el código para que aparezca el div haciendo clic en un botón:

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

¡Espero que alguien pueda ayudarme! ¡Gracias por leer!