使用mousewheel jquery插件滚动速度

Question

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. :)

Answer 1

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');
    }
});