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