I want to imitate the Google+ header with the search bar. When you scroll down it goes to top:-60px
and the second horizontal menu will be top:0
from top:60px
and become the main top horizontal menu, while the one with top:-60px
remains hidden until we scroll to top.
I managed to do this, but it only works when I scroll slowly (with trackpad, OSX, Chrome33). I researched and found out the scroll speed depends on the hardware (touchpad, mouse), the OS and even on the browser. I found mousewheel plugin, that aims to make the scrolling speed equal but I can't make it work.
Here is the js code: ( The delta divisions I got from here: https://stackoverflow.com/a/16696129 )
<script type="text/javascript">
gn_top_menu_featured = $('.gn-top-menu-featured'),
gn_top_menu = $('.gn-top-menu'),
hide_gn_top_menu_featured = 0,
gn_top_menu_position = 44;
$('body').on('mousewheel', function(event) {
if( event.deltaX >= 40 )
event.deltaX /= 40;
if( event.deltaY >= 40 )
event.deltaY /= 40;
var sy = $('body').scrollTop();
if ( sy >= hide_gn_top_menu_featured && sy <= gn_top_menu_position ) {
gn_top_menu_featured.css('top', -sy);
gn_top_menu.css('top', gn_top_menu_position-sy);
}
else {
// whatever
}
});
</script>
I really want to get this working properly, thank in advance. :)
Turns out i misunderstood your problem at first. Here's another attempt at solving this. I still might not be understanding you correctly, because I still don't need to control the mousewheel speed to make this work. Here's the updated fiddle .
I use the $(window).scroll
event to check the $(window).scrollTop()
value and change the css class of the div.
$(window).scroll(function(){
$("#nav").css("top", ($(window).scrollTop() < 60 ? (60 - $(window).scrollTop()) : 0) + 'px');
if ($(window).scrollTop() > 60) {
$("#nav").addClass('sub-60').text('WOOT!');
}
else {
$("#nav").removeClass('sub-60').text('MAIN NAV');
}
});
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.