Sticky Section Not Working in Elementor Stacked Card Scroll

I’m trying to create a stacked card scroll effect in Elementor using custom CSS and JavaScript (based on a YouTube tutorial). However, the section above the cards (main container) isn’t sticking to the top during the scroll animation; it moves with the scroll.

The tutorial- [https://www.youtube.com/watch?v=7RhQq-DfIqI&list=PLJ2-MeNkZFN5E9KCLvbwSv2Uu7lElogPt&index=33&t=360s]

I’ve followed the tutorial steps carefully but still encounter this issue. I’ve searched online for solutions but haven’t found anything relevant.

As a beginner, inspecting every line of code is challenging. Could you please help identify potential issues in the CSS or JavaScript code that might be causing the sticky section to malfunction? Any suggestions on where to modify the code to achieve the desired effect (sticky section until animation starts) would be greatly appreciated.

Code Snippets:

CSS

selector{
    --card-scroll-height: 400;
    --card-rotate: 12;
}
selector .mdw-active-card{
    transform: translateY(-100vh) rotate(-60deg) !important;
    transition:1s;
    visibility: hidden;
    transform-origin: bottom left;
}
selector > .e-con,
selector > .e-container,
selector > .e-con-inner > .e-con,
selector > .e-con-inner > .e-container{
    position: sticky;
    top:0;
}

JavaScript

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>

<script>

if(!MDWNonce100){
    
var MDWNonce100 = true

$(document).ready(function() {
    
var previousScrollTop = [],
cards = [],
cardScrollHeight = [],
cardRotate = [],
cardContainer = [],
stickyTop = [],
stickyCon = []


// Sliding crads on scroll

function cardSlideUp(){

$('.mdw-stacked-card-area').each(function(i){
    
    var $this = $(this),
    scrollTop = $(document).scrollTop(),
    cardAreaTop = $this.offset().top,
    index = Math.floor((scrollTop - cardAreaTop - stickyTop[i]) / cardScrollHeight[i]),
    totalCards = cards[i].length
    
    cards[i].removeClass('mdw-active-card')
    cards[i].each(function(j){
        if( j <= index ) {
            $(this).addClass('mdw-active-card')
        }
        if(index >= -1 && index < totalCards - 1){
            $(this).css({
                'transform': `rotate(${ -1*j*cardRotate[i] + (index+1)*cardRotate[i] }deg)`
            })
        }
    })
    
    previousScrollTop[i] = scrollTop
})

}


function setValues(){

$('.mdw-stacked-card-area').each(function(i){
    
    var $this = $(this)
    
    stickyTop[i] = 0
    
    if(stickyCon[i].outerHeight() > $(window).height()){
        stickyTop[i] = cardContainer[i].offset().top - stickyCon[i].offset().top - $(window).height()/2
    }
    stickyCon[i].css('top', -1*stickyTop[i])
    
    cardScrollHeight[i] = $this.css('--card-scroll-height') ? parseInt($this.css('--card-scroll-height').trim()) : 400
    cardRotate[i] = $this.css('--card-rotate') ? parseInt($this.css('--card-rotate').trim()) : 9
    
    
    // Rotating cards
    
    cards[i].each(function(j) {
        $(this).css({
            'transform': `rotate(-${j * cardRotate[i]}deg)`,
            'z-index': cards[i].length - j
        })
    })


    // Card area height
    
    $this.css('height', stickyCon[i].outerHeight() +  ((cards[i].length - 1) * cardScrollHeight[i]) + 'px' )
})

}

$(document).on('scroll', cardSlideUp)
$(window).on('resize', function(){
    setValues()
    cardSlideUp()
})


function init(){

$('.mdw-stacked-card-area').each(function(i){
    
    var $this = $(this)
    
    cards[i] = $this.find('.mdw-stacked-cards > .e-con, .mdw-stacked-cards > .e-container, .mdw-stacked-cards > .e-con-inner > .e-con, .mdw-stacked-cards > .e-con-inner > .e-container')
    stickyCon[i] = $this.children('.e-con, .e-container').eq(0)
    
    stickyCon[i].parents().each(function(){
        if( !$(this).is('html') ){ $(this).css('overflow', 'visible') }
    })
    
    previousScrollTop[i] = $(document).scrollTop()
    cardContainer[i] = $this.find('.mdw-stacked-cards')
})

setValues()
cardSlideUp()

}

init()
    
})
}
</script>

The Goal:
The goal is for a section to remain sticky at the top until the scrolling animation starts. However, the sticky section isn’t behaving as expected.

Functionality: During scrolling, the cards should rotate individually, creating a flowing animation. The parent container holding the cards container should remain fixed at the viewport until all cards have completed their rotation animations. This means cards will appear to ‘flow up’ when scrolling down and return to their original positions when scrolling back up.

the effect i’m trying to achive

Problem: The main section, intended to stay fixed at the top of the screen (sticky), isn’t working as expected. While the cards are animating correctly during scrolling, the main section and all its child elements are moving with the scroll instead of remaining fixed.
**
Additional Information:
Elementor version: 3.20.0
(i’m using Elemntors latest flex box container)

What could be causing the sticky section to malfunction in this scenario? Are there any adjustments in the CSS or JavaScript that might resolve the issue?

I’m aiming to achieve a smooth scrolling animation with a section remaining sticky until the card effects end.