javascript - jquery navigation scroll up on slide, not working -
any 1 have solution me why not working? websites let navigation disappear on slide down , show whe toggle up, in case tried insert script, , tried not effect html code , use have, nothing works. script-
<script> var previousscroll = 0, headerorgoffset = $('#header').offset().top; $('target').height($('#header').height()); $(window).scroll(function() { var currentscroll = $(this).scrolltop(); console.log(currentscroll + " , " + previousscroll + " , " + headerorgoffset); if(currentscroll > headerorgoffset) { if (currentscroll > previousscroll) { $('#header').fadeout(); } else { $('#header').fadein(); $('#header').addclass('fixed'); } } else { $('#header').removeclass('fixed'); } previousscroll = currentscroll; }); </script>
the html-
<nav class="navi" id="target"> <div class="menu" id="header"> <li><a class="link-1" href="#">home</a></li> <li><a class="link-1" href="#">second</a></li> <li><a class="link-1" href="#">third</a></li> <div class="logo"> <li><a href="#"><img alt="brand" src="logo.png" height="40px" width="60px"></a><li> </div> </div> <div class="handle"><p>menu</p></div> </nav>
demo: https://jsfiddle.net/66jk442l/
here 1 way it.
var timeout, navbar = $('.navbar'), h = navbar.height(); $(window).scroll(function () { cleartimeout(timeout); if ($(this).scrolltop() > 100) { timeout = settimeout(hidebar, 1200); } else { showbar(); } }); function showbar() { navbar.css('height', h); $('.navbar > *').show(); } function hidebar() { $('.navbar > *').hide(); navbar.css('height', 5); } navbar.hover(function () { showbar(); }, function () { cleartimeout(timeout); if ($(window).scrolltop() > 100) { timeout = settimeout(hidebar, 1200); } });
Comments
Post a Comment