How can you make a header hide on scroll down, and appear on scroll up 5x (like google+)?
Question
I'm trying to make my top navigation bar disappear after scrolling down at least 5px, and reappear after scrolling up 5px fast. Very similar to google+ header. I've tried searching for any tutorials, and I've tried some js and jQuery methods but I can't seem to get them to work. View at My Site .
HTML:
<body>
<div class="gridContainer clearfix">
<nav id="topNav" class="fluid">
<ul class="fluid fluidList navSystem">
<li class="fluid navItem"><a href="#" title="Web">Web</a></li>
<li class="fluid navItem"><a href="#" title="Photos">Photos</a></li>
<li class="fluid navItem"><a href="#" title="Videos">Videos</a></li>
<li class="fluid navItem"><a href="#" title="Music">Music</a></li>
<li class="fluid navItem"><a href="#" title="People">People</a></li>
<li class="fluid navItem"><a href="#" title="Places">Places</a></li>
<li class="fluid navItem"><a href="#" title="Shopping">Shopping</a></li>
<li class="fluid navItem"><a href="#" title="More">More...</a></li>
</ul>
</nav> <!-- END #topNav -->
<header id="header" class="fluid">
</header> <!-- END header -->
</div> <!-- END .gridContainer -->
</body>
CSS:
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
clear: none;
float: none;
}
#topNav {
overflow: hidden;
width: 100%;
height: 29px;
margin-left: auto;
margin-right: auto;
position: fixed;
top: 0;
left: 0;
background-color: #2D2D2D;
z-index: 999;
}
#header {
position: relative;
width: 100%;
height: 44px;
position: fixed;
background-color: #D2D2D2;
}
1 answers
solution1
3 ACCPTED 2013-07-26 00:18:45
Didn't look too deep into how it was implemented on their end. You could use a combination of tracking the scroll position and rendering changes from there with js:
var scroll_pos = 0;
var scroll_time;
$(window).scroll(function() {
clearTimeout(scroll_time);
var current_scroll = $(window).scrollTop();
if (current_scroll >= $('#topNav').outerHeight()) {
if (current_scroll <= scroll_pos) {
$('#topNav').removeClass('hidden');
}
else {
$('#topNav').addClass('hidden');
}
}
scroll_time = setTimeout(function() {
scroll_pos = $(window).scrollTop();
}, 100);
});
And you'll have to add css class:
#topNav.hidden {
display: none;
}
See it in action here: http://jsfiddle.net/frZ9j/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.