Question

我想用搜索栏模仿Google+标题。当您向下滚动时，它将转到top:-60px，第二个水平菜单将从top:0成为top:60px并成为主要的顶部水平菜单，而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

原来我误解了你的问题。这是解决这个问题的另一种尝试。我仍然可能没有正确理解你，因为我仍然不需要控制鼠标滚轮速度来使其工作。这是updated fiddle。

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

使用mousewheel jquery插件滚动速度

1 个答案: