0

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

Community
  • 1
  • 1
aegyed
  • 1,320
  • 3
  • 20
  • 39

1 Answers1

0

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');
    }
});
Taylan Aydinli
  • 4,333
  • 15
  • 39
  • 33
  • Let me explain it again. Both my top horizontal menus are `position:fixed`. The 1st one at `top:0` the 2nd one at `top:44`. When the user scrolls up/down both the top menus `top` value will be updated one by one. Once the 1st one with the original value of `top:0` reaches `top:-44` and the 2nd one with the original value of `top:44` reaches `top:0` the evaluation will return false and the DOM manipulation is finished. Until the user scrolls up. When I scroll too fast, it misscounts. This is because of the too big `delta` of the trackpads and I can't solve it. – aegyed Nov 16 '13 at 19:37