How to make a sticky navigation bar ?

Question

This is My code , hope you guys help me .

Im trying to create a navigate bar that stick on the top of the page and moves when the user scroll down .

<!DOCTYPE html>
<html>

<title>New Technology Planet</title>

<head>

 
<style>


header {
    background-image : url("pic15.jpg");
    color:white;
    text-align:center;
    padding:150px;
}






ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
 
 
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li.logo{
     border-right: none;
  font-family:Impact, Charcoal, sans-serif;
  color:white;
  font-size:40px;
  margin-top: 15px;
  padding-left:30px;
  }


li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 25px 30px;
    text-decoration: none;
 font-size:20px;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

  

 
#section {
    width:350px;
    float:center;
    padding:10px;    
}
#footer {
    background-image : url("pic17.jpg");
    color:white;
    clear:both;
    text-align:center;
    padding:100px;    
}

#header{
    font-family: "Comic Sans MS", cursive, sans-serif;
  }

    

</style>

 

</head>


<body>

         <header>
            <h1>New Technology Planet</h1>
   <p><h3>The WebSite Is Still Under Construction By Laith SJ</h3></p>
   <p>Teamspeak3 & WebSites Hosting</p>
            <p>Our goal is to give you the best what we can do!</p>
         </header>




   
   
   
         
              <!-- Navagator start -->

     <nav role='navigation'>
                     <ul> 
                         <li class="logo">NewTecPlanet</li>                         
                       <ul style="float:right;list-style-type:none;">
             <li><a class="active" href="#home">Home</a></li>
                            <li><a href="#news">News|Updates</a></li>
                            <li><a href="#contact">Products</a></li>
             <li><a href="#login">SignUp | Login</a></li> 
       <li><a href="#about">About US</a></li>
                            <li><a href="#about">Contact Us</a></li>
                           
                       </ul>
                    </ul>
     </nav>
    <!-- navagattor end code -->

<!-- -->

        
   
   
       <div id="section">
         <h2>test</h2>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         
       </div>

     
  <!-- last part of the page -->
  
   <div id="footer">
        New Technology Planet
      </div>
   
   
</body>
</html>

Guys please feel free to edit the post if you think that there is something good will help the viewers , and hope if you can edit the code so it can works good .

if you need an example about what im asking let me know , i dont want to post other websites so i dont break any rules .

Thank you

`position: fixed` fixes an element to the viewport rather than the document. — GolezTrol, Jan 27 '16 at 21:35
I assume you mean that as the top of the window passes the navigation bar is sticks and stays visible? - possible duplicate of http://stackoverflow.com/questions/28452235/make-a-nav-bar-stick-to-the-top-when-scrolling-with-css — Dom UIXNZ, Jan 27 '16 at 21:38
yea thats what i mean , and when the user scroll up the nav bar goes back to the old position . i tired to look to the page that you lined but i could not understand anything , i tried to test it , but it did not work . and can i link an example for what im asking ? — Porg - Laith SJ, Jan 27 '16 at 22:00

Raja Khoury · Accepted Answer · 2016-01-27T22:35:52.870

1

Create a class sticky and give it a position:fixed. On scroll check the window's & nav bar position then assign that class to your nav to stick it at the top of the screen. See the example below:

JSFiddle

var topNav = document.getElementById("topNav"),
  stop = topNav.offsetTop,
  docBody = document.documentElement || document.body.parentNode || document.body,
  hasOffset = window.pageYOffset !== undefined,
  scrollTop;

window.onscroll = function(e) {
  scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;
  if (scrollTop >= stop) {
    topNav.className = 'sticky';
  } else {
    topNav.className = '';
  }
}

  header {
    background-image: url("pic15.jpg");
    color: #5A4A4A;
    text-align: center;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  li {
    float: left;
    border-right: 1px solid #bbb;
  }
  li.logo {
    border-right: none;
    font-family: Impact, Charcoal, sans-serif;
    color: white;
    font-size: 40px;
    margin-top: 15px;
    padding-left: 30px;
  }
  li:last-child {
    border-right: none;
  }
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 25px 30px;
    text-decoration: none;
    font-size: 20px;
  }
  li a:hover:not(.active) {
    background-color: #111;
  }
  .active {
    background-color: #4CAF50;
  }
  #section {
    width: 350px;
    float: center;
    padding: 10px;
  }
  #footer {
    background-image: url("pic17.jpg");
    color: white;
    clear: both;
    text-align: center;
    padding: 100px;
  }
  #header {
    font-family: "Comic Sans MS", cursive, sans-serif;
  }
  .sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

<header>
  <h1>New Technology Planet</h1>
  <p>
    <h3>The WebSite Is Still Under Construction By Laith SJ</h3>
  </p>
  <p>Teamspeak3 & WebSites Hosting</p>
  <p>Our goal is to give you the best what we can do!</p>
</header>


<!-- Navagator start -->

<nav role='navigation' id="topNav" class="">
  <ul>
    <li class="logo">NewTecPlanet</li>
    <ul style="float:right;list-style-type:none;">
      <li><a class="active" href="#home">Home</a>
      </li>
      <li><a href="#news">News|Updates</a>
      </li>
      <li><a href="#contact">Products</a>
      </li>
      <li><a href="#login">SignUp | Login</a>
      </li>
      <li><a href="#about">About US</a>
      </li>
      <li><a href="#about">Contact Us</a>
      </li>

    </ul>
  </ul>
</nav>
<!-- navagattor end code -->

<!-- -->




<div id="section">
  <h2>test</h2>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>

</div>


<!-- last part of the page -->

<div id="footer">
  New Technology Planet
</div>

edited Jan 27 '16 at 22:35

answered Jan 27 '16 at 21:47

Raja Khoury

2,572
1
16
16

I tried it but it did not work , if you tested it and worked with you , cuz i toke it copy and past . – Porg - Laith SJ Jan 27 '16 at 22:09
Do you have any errors in your console ? – Raja Khoury Jan 27 '16 at 22:17
Working here : https://jsfiddle.net/c0e5ez9m/2/ – Raja Khoury Jan 27 '16 at 22:22
ok so its working on Code Snippet , but the problem i did copy the code and its not working at all in my browser , mm, let me check again – Porg - Laith SJ Jan 27 '16 at 22:23
I do not recommend to copy / paste code. Instead try to understand it and implement it yourself. Here I created a css class named `sticky` and gave it a position fixed. The position fixed will stick the nav bar at the top of the window. Now in your Javascript whenever you scroll you need to get the Window's top position and your nav bar position. If you scroll down beyond the nav add the class sticky to it, otherwise remove it.. Get it ? – Raja Khoury Jan 27 '16 at 22:28
how i can see the errors , and i swear i did the same thing , copy and past and its not works . thank you for your patient . – Porg - Laith SJ Jan 27 '16 at 22:29
Are you using Chrome ? Press F12 -> Console then refresh the page – Raja Khoury Jan 27 '16 at 22:30
i did get it yea , i understand how it works , fully understand that , and i tracked all the code when i typed it , and when you did i really tracked it and i understand it , but i dont know why its not working , everything seems to be great but the my browser says no lol – Porg - Laith SJ Jan 27 '16 at 22:31
yes im using it and this is the error that shows up "Uncaught TypeError: Cannot read property 'offsetTop' of null" – Porg - Laith SJ Jan 27 '16 at 22:34
Did you add the id="topNav" to your nav element in the HTML markup ? It seems you did not.. (
)
– Raja Khoury Jan 27 '16 at 22:37
yes i did and i will give you the full code in a sec – Porg - Laith SJ Jan 27 '16 at 22:43
nothing is working , the same code mmm , the JS code will be inside – Porg - Laith SJ Jan 27 '16 at 22:47
Yes JS inside script tags. It is really hard to guess where's the problem without seeing any of the code.. – Raja Khoury Jan 27 '16 at 22:49
how can i link the code in a comment , cuz you know the code is long – Porg - Laith SJ Jan 27 '16 at 22:52
Create a JSFiddle or Edit your question and add it at the bottom as an update – Raja Khoury Jan 27 '16 at 22:53
https://jsfiddle.net/c0e5ez9m/3/ the wired thing is the code is working there lol , should i create a css page and put the css code inside the html code and between – Porg - Laith SJ Jan 27 '16 at 22:56
In your CSS there a dot missing before sticky. Change sticky to .sticky, then move the Javascript and add it at the bottom of the page before the body closing tag : ..... – Raja Khoury Jan 27 '16 at 23:02
this is a screenshot from the error http://prntscr.com/9vpogd and i tried firefox and the same error , again thank you for your patience – Porg - Laith SJ Jan 27 '16 at 23:03
Yea now its working , thank you man thank you so much , it was a stupid error from me , i was studying when i should use #and when i should "." and yea thank you man for explain the code to me cuz i truly understand how it works , thank you =) – Porg - Laith SJ Jan 27 '16 at 23:06
and to be honest i though that the script tags should be in the head but now something new i have learned , the script should be inside the body =) thank you for that too . – Porg - Laith SJ Jan 27 '16 at 23:08
No Worries Porg, I'm glad its working. The javascript can be inside the head tag, actually you could add a link to your JS files inside the tag, the error topNav is null is because you are declaring / running a function before the element.. – Raja Khoury Jan 27 '16 at 23:13
1

Thank for the explanation buddy I appreciate that , thanks for everything =) – Porg - Laith SJ Jan 27 '16 at 23:16
See here http://stackoverflow.com/questions/5371047/getelementbyid-returns-null-even-though-the-element-exists - This is the problem you were facing, the javascript executed before the DOM elements are loaded. If you are using jQuery try to wrap your functions in a DOM ready function – Raja Khoury Jan 27 '16 at 23:17
Got you =) thank you – Porg - Laith SJ Jan 27 '16 at 23:52

How to make a sticky navigation bar ?

1 Answers1

Linked