How to make my fixed "mobile-nav" bar appear when I scroll down the page? -
#web-nav { display: none; } #mobile-nav { width: 100%; background: url(img/menu-bg.png) repeat; height: 70px; display: block; position: fixed; z-index: 50; top: 0px; }
<nav id="mobile-nav"> <a href="index.html"> <img class="logo" src="admin/wp-content/themes/mame/assets/img/sicklehammer.png" /> </a> <img class="drop-nav" src="open.png" /> </nav> <nav id="mobile-expand"> <img class="logo" src="logo.png" /> <img class="close" src="img/close.png" /> <div id="hidden-nav"> </div> <ul id="menu"> <li><a href="index.html">home</a> </li> <li><a href="work/index.html">work</a> </li> <li><a href="about/index.html">about</a> </li> <li><a href="blog/index.html">blog</a> </li> <li><a href="contact/index.html">contact</a> </li> <ul class="work-subs"> <li><a href="/index.html">movies</a> </li> <li><a href="/index.html">photos</a> </li> </ul> </ul> </nav>
this use <script> $('#main-nav').hide(); $(window).scroll(function () { if ($(this).scrolltop() > 750) { $('#main-nav').fadein(); } else { $('#main-nav').fadeout(); } });
Comments
Post a Comment