Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make Sticky navigation

    • 0
    • 3
    • 3
    • 1
    • 0
    • 0
    • 0
    • 0
    • 933
    Comment on it

    Hello Readers !

    Below is an example of sticky navigation with simple script which is compatible with internet explorer. You can use this script for sticky header or sticky footer.

    I hope it will be helpful for you.

    Script:-

    $(document).ready(function(){
      $(window).scroll(function(){
        if($(this).scrollTop() > 1){
          $('nav').addClass('sticky')
        }
        else($('nav').removeClass("sticky"))
      });
    });
    

    Css:-

      section{width: 900px;margin: 0 auto}
      footer , header{height: 120px;background-color: #ccc}
      main{height: 900px}
      nav{background-color: #333;}
      nav ul{background-color: #e5e5e5;list-style: none;}
      nav ul li{display: inline-block;}
      nav ul li a{color: red;}
      .sticky{position: fixed;top:0px;width:900px}
    

    Html :-

    <section>
      <header id="header">
    
      </header>
      <main>
        <nav>
          <ul>
              <li><a href="" title="">Navigation1</a></li>
              <li><a href="" title="">Navigation</a></li>
            </ul>
        </nav>
       </main> 
      <footer>
    
      </footer>
    </section>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: