Fade in menu when scrolled

[jspence29]

My site is www.jeremyspence.net78.net. As you scroll down I want to make the main menu dissapear(the one menu you see now) and another smaller menu (kinda like the apple menu from apple.com) appear on the top that is fixed, I was thinking about making a sticky menu, but I want the menu to appear at the top when you scroll not just stick to the top from another point on the screen. Does anyone know how to make a menu appear when you scroll, or any tutorials that teach you how? Thanks

[JorgeM]

Your site is not coming up for me. It seems to be unavailable...

[GliderPilot]

you want to get the offsetTop preoprty of the main menu than get the scrollbar position. If the scrollbar is down more pixels than the main menu, add your top menu. Here is a small example in jQuery (untested):

    var main_menu_top = $('#main_menu').offset().top;
    //Change the number to the height of your menu
    var menu_bottom = main_menu_top + 100;

    $(window).scroll(function(){    
        var scroll_top = $(window).scrollTop(); // our current vertical scroll position from the top

        // Check to see if we've scrolled more than the top menu
        if (scroll_top > menu_bottom) {
            //Our scroll is lower than the main menu, check if the top menu is already displayed
            if ( ($("#top_menu").is(":visible") == false) ) {
              //Menu isn't visible, so show it
              $('#top_menu').show();
            }
        } else {
            //Scroll bar is higher than the bottom of the main menu so make sure the top menu isn't visible
            if ( $("$top_menu").is(":visible") ) {
                $('#top_menu').hide();
            }
        }
    });

[jspence29]

thank you that worked great, just one minor thing, you added an extra $ sign in the last if/else declaration

[JorgeM]

I kept an eye on this thread because I was working on a project that had a similar feature with regard to 'showing/hiding' a secondary menu when you scroll down the page. I noticed that the link that jspence29 provided is no longer active so the code that GliderPilot provided is not 100% complete.

Unfortunately, I do not know what code that jspence had in place so I used GliderPilot's snippet and worked my way backwards and came up with this demo...

Can be found here...
http://jsfiddle.net/fXeFB/2/

html demo file is also attached and should simply be downloaded and unzipped...

Just posted this in case anyone else has a similar need... feel free to use and adapt for your project.