Opacity reduction script does not working

June 11, 2022

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

>Solution :

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>