Jump to content
Adamhumbug

Sticky Header works 90% of time

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.