Sticky Header works 90% of time

[Adamhumbug]

I have the following code that lives in the php file with the navbar html.

 

<script>
	// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the navbar
var navbar = document.getElementById("main-nav-bar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky")
  }
}


</script>

on my home page i have a hero and the nav is at the bottom of it.  It works great, when your scroll to it it sticks.  When you scroll back up it attaches back to the content (the bottom of the hero).

 

I have another page that "includes" the nav.  It works most of the time but on some page refreshes, the nav loads directly at the top of the page not under the header and when i scroll up and down it stays attached to the top of the screen.  The class sticky gets appended and never removed.

Any ideas why this would be.

 

There is nothing exciting going on in this project.  Currently all static data.

 

[Adamhumbug]

I have uploaded a video of what is happening here

 

https://filebin.net/ur647qv7tqlw62bt

[Adamhumbug]

This is the order of the code in the nav.php

 

<?php
if($currentPage != 'home'){
  echo <<<TEXT
    <div id="sponsor-bar">
      <img src="img/sponsor-bar.png" alt="" style="width:100%;">
    </div>
  TEXT;
}
?>



<div id="main-nav-bar" class="">
  <a class="active" href="index.php">Home</a>
	<a href="javascript:void(0)">News</a>
 	<a href="javascript:void(0)">Senior Cricket</a>
	<a href="javascript:void(0)">Junior Cricket</a>
	<a href="javascript:void(0)">Social Events</a>
	<a href="players.php">Players</a>
	<a href="javascript:void(0)">Training</a>
	<a href="javascript:void(0)">Sponsors</a>
	<a href="committee.php">Committee</a>
</div>	

sorry this post is bitty