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.
Please make sure your CSS is loading properly & is not overridden. Check browser console to see Javascript errors & also check the style you added is being implemented or not.
Another workaround, Please try adding inline-style:
<div class="header" style="position: fixed; top: 0;" >
<h2>My Header</h2>
</div>