Porg - Laith SJ Porg - Laith SJ - 3 months ago 9
CSS Question

How to make a sticky navigation bar ?

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

Answer

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>