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)