скорость прокрутки с помощью плагина jQuery для мыши mutex

Question

Я хочу подражать заголовку Google+ с помощью панели поиска. Когда вы прокрутите вниз, он перейдет к top:-60px, а второе горизонтальное меню будет top:0 от top:60px и станет основным верхним горизонтальным меню, а одно с top:-60px останется скрытым, пока мы не прокрутим вверх.

Мне это удалось, но оно работает только при медленном прокрутке (с трекпадом, OSX, Chrome33). Я исследовал и выяснил, что скорость прокрутки зависит от аппаратного обеспечения (тачпад, мышь), ОС и даже от браузера. Я нашел плагин mousewheel, цель которого - сделать скорость прокрутки равной, но я не могу заставить ее работать.

Вот код JS: (Дельта дивизии я получил здесь: 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

Оказывается, я сначала неправильно понял вашу проблему. Вот еще одна попытка решить это. Я все еще не понимаю вас правильно, потому что мне все равно не нужно контролировать скорость колесика мыши, чтобы сделать эту работу. Вот updated fiddle.

Я использую событие $(window).scroll, чтобы проверить значение $(window).scrollTop() и изменить класс css 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'); 
    } 
});