HTML sticky navigation bar become non-sticky when load with JS

I try to load a sticky navigation bar header on various static html pages.

I use this jquery script to do so:

<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
});
</script> 

and this to load it where I want

    <header id="header" class="header-transparent header-transparent-light-bottom-border header-transparent-light-bottom-border-1 header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
            </header>

Everything works fine except for the sticky part of the navigation bar. For a reason unknown to me it decides to act as a non-sticky navigation bar and scroll with the content of the page.