I have a problem with my code when the section is visible, there's a flickering happening on the frontend. The elements inside that section are flickering when on viewpoint. Here's my Jquery Code:

jQuery( document ).ready(function($) {


$(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
        var window_height = $(window).height(); 
            var scrollMiddle = $(window).scrollTop() + (window_height/2);
  
$(window).scroll(function() {
    
    $(".fading-section").each(function() {
        var classes = $(this).attr("class").split(/\s+/);
        var objectBottom = $(this).offset().top + $(this).outerHeight();
        var objectTop = $(this).position().top;
        var section_bg = $(this).find(".uagb-section__overlay").css("background-color");
        
        
        if (scrollMiddle >= objectTop && scrollMiddle <= objectBottom) { //object comes into view (scrolling down)
            
            
                $("body.page-id-2899").stop(false,false).animate({ backgroundColor: section_bg}, 750);
                $(this).addClass('visible-section');
                $(this).removeClass('notvisible-section');
                
            
        } else {
                $(this).removeClass('visible-section');
                $(this).addClass('notvisible-section');
                
            
        }
        
        
        //console.log(classes);
        //console.log(section_bg);
        //console.log("Object Top:" + objectTop);
        //console.log("Object Bottom:" + objectBottom);
        //console.log("The Middle:" + scrollMiddle);
        //console.log("Height of the screen:" + window_height);
    });
});  

 }); //invoke scroll-handler on page-load
});

This code will just set the opacity to 1 when I add the class on that section.