Tengo un problema con un script que hasta hace poco funcionaba, pero ahora parece que no quiere funcionar. Quiero reducir la opacidad de las esferas verdes cuando me desplazo hacia abajo, parece estar funcionando hasta hace poco, pero ahora no puedo entender cuál es el problema.
El sitio web es este: https://attiliosantomo.com/PROVA/
El guion es este:
$(document).ready(function() { $(window).scroll(function(event) { let scroll = $(this).scrollTop(); let opacity = 1 - (scroll / 1300); if (opacity > 0.2) { $('.bg-bubble').css('opacity', opacity); } }); }); </script>Muchas gracias por tu ayuda
El problema es que no es la ventana la que se desplaza. Es el elemento .main-desktop que se está desplazando. Dirigirse al evento de desplazamiento de .main-desktop como se indica a continuación debería resolver el problema.
$(document).ready(function() { // \/ Changed \/ selector from window to '.main-desktop' $('.main-desktop').scroll(function(event) { let scroll = $(this).scrollTop(); let opacity = 1 - (scroll / 1300); if (opacity > 0.2) { $('.bg-bubble').css('opacity', opacity); } }); }); html, body { height: 100%; margin: 0; } .main-desktop { overflow: scroll; height: 100%; } .inner { height: 3000px; } .bg-bubble { height: 100px; width: 100px; background-color: blue; position: absolute; top: 0; left: 0; border-radius: 50%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="bg-bubble"></div> <div class="main-desktop"> <div class="inner"></div> </div>