How to create a menu with jquery that performs this effect after scroll?

Question

Hello, my friends.

I’m a beginner and I would like to know how I apply this effect in a fixed menu (for desktops) so that when the user navigates to the following Section (after #home Section) a background appears in the menu and it will have position: Fixed (apparently), as we can see in the following link:

http://unbranded.co/glissando/index02.html (navigate to the next section to view the effect)

This effect is very common in Landings Pages.

I’ve looked for jQuery plugins that perform this effect, but I believe I’m not sure how to look, because I found nothing.

I will be very grateful.

Answer 1

Apparently, it is using this jquery plugin:
http://imakewebthings.com/waypoints/guides/getting-started/
What it does is monitor how much the person scrolled on the page (or 'rolled' the page in clear Portuguese) and apply a css class on it to change the background and put the Fixed position for example:

$('#about').waypoint(function (event, direction) {

        if (direction === 'down') 
        {
            $('.header').addClass('solid-bg');            
        } 
        else 
        {
           $('.header').removeClass('solid-bg');   
        }

},{ offset: 100 });

In his case the id="about" is the part of the page that is just below his slider, so as soon as the person scrolls on the page at the end of the slider onwards, he will apply the class="Solid-bg" which has the following css:

.header.solid-bg {
    background: #555;
    top: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: fixed;
}

Just take this example and apply with your style on your page.