使用mousewheel jquery插件滚动速度

Question

我想用搜索栏模仿Google+标头。 向下滚动时，它会转到top:-60px ，第二个水平菜单将从top:60px变为top:0 ，并成为主要的top水平菜单，而top:-60px菜单将一直隐藏，直到我们滚动到顶部。

我设法做到了，但是只有当我缓慢滚动（使用触控板，OSX，Chrome33）时，它才能起作用。 我研究发现滚动速度取决于硬件（触摸板，鼠标），操作系统甚至浏览器。 我找到了mousewheel插件，该插件旨在使滚动速度相等，但我无法使其正常工作。

这是js代码：（我从这里得到的delta分区： 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>

我真的很想让它正常工作，谢谢。 :)

Answer 1

原来我一开始就误解了你的问题。 这是解决此问题的另一种尝试。 我可能仍然无法正确理解您，因为我仍然不需要控制鼠标滚轮的速度即可完成这项工作。 这是更新的小提琴 。

我使用$(window).scroll事件检查$(window).scrollTop()值并更改div的CSS类。

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