不透明度降低脚本不起作用

Question

I have a problem with a script that until recently worked, but now seems not to want to work. I want to reduce the opacity of the green spheres when scrolling down, it seems to be working until recently, but now I can't figure out what the problem is.

The website is this: https://attiliosantomo.com/PROVA/

The script is this:

        $(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>

Thank you so much for you help

Answer 1

The issue is that it's not the window that is scrolling. It's the .main-desktop element that is being scrolled. Targeting the scroll event of the .main-desktop as per below should solve the issue.

 $(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>