Detailed tutorial is here: https://ultimateelementor.com/docs/sticky-header-with-ehf/

Sticky Section in Elementor

Created header using this plugin: https://wordpress.org/plugins/header-footer-elementor/

Step 1 – Now edit the above header in Elementor and add a Custom ID to the outermost section (here we are using my-custom-id ).
Step 2 – Now add following custom CSS. You can add it to the customizer under the ‘Additional CSS’ section or use
any external plugin that provides an area to add custom CSS.


#custom-sticky-section.elementor-section{
position: fixed;
left: 0;
width: 100%;
}


Note – In the above code, please replace ‘custom-sticky-section’ with your ID.

This step will make your header stick to the top.

================================================================================================

This code need to add in theme's functions.php file

// WordPress custom function
function my_custom_function(){
    ?>
    <script>
    	window.onscroll = function() {myFunction()};
		// Get the header
		var header = document.getElementById( "custom-sticky-section" );
		// Get the offset position of the navbar
		var sticky = header.offsetTop;
		// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
		function myFunction() {
		  if ( window.pageYOffset > 40 ) {		    
			header.classList.add( "hfe-sticky" );		  		
		  } else {
		  	setTimeout(function(){
				header.classList.remove( "hfe-sticky" );		  		
		  	}, 100);		    
		  }
		}
    </script>
    <?php
}
add_action('wp_footer', 'my_custom_function');




CSS code:

#custom-sticky-section.elementor-section.hfe-sticky{
position: fixed;
left:0;
width:100%;
	animation:slide-down 0.8s;
}
@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    } 
    100% {
        opacity: 0.9;
        transform: translateY(0);
    } 
}

@media( max-width: 767px ){

	#my-custom-id.elementor-section.hfe-sticky{
		top: 0;
	}
}