'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.

javascripthtmlcssnavigationbar


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maninder Singh

Related Questions