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)