Gyancode

A free library of HTML, CSS, JS

Search This Blog

Friday 24 June 2016

Sticky Navigation

<script type="text/javascript">
jQuery(window).scroll(function () {
  if (jQuery(document).scrollTop() == 0) {
    jQuery('.menu').removeClass('sticky');
  } else {
    jQuery('.menu').addClass('sticky');
  }
 
});

</script>


<header id="home" class="menu">
  <div class="container">
    <div class="header">
      <div class="logo"> <a href="index.html"><img src="images/logo.png" alt="" /></a> </div>
      <div class="nav">
        <ul>
          <li class="active"><a href="#home_bg" class="scroll">Home</a></li>
          <li><a href="#about_bg" class="about scroll">About</a></li>
          <li><a href="#product_bg" class="product scroll">Product</a></li>
          <li><a href="#client" class="client scroll">Clients</a></li>
          <li><a href="#career" class="career scroll">Career</a></li>
          <li><a href="#contact_bg" class="contact scroll">Contacts</a></li>
          <div class="clear"> </div>
        </ul>
      </div>
      <div class="clear"> </div>
    </div>
  </div>
</header>

No comments :

Post a Comment