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

Question

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

Navigation

#1 by (2 votes)

1

Hello, friends.

I am a beginner and 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 section #home) a background appears in the menu and it have position: fixed (apparently), as we can see in the following link:

link (navigate to the next section to see the effect)

This effect is very common in Landings Pages.

I've already tried jQuery plugins that do this, but I do not think I know what to look for, since I did not find anything.

I'll be very grateful.

javascript jquery html5 css

asked by anonymous 21.03.2016 / 12:54

1 answer

Box of different height fit the same Pinterest How to transform a java String into a Java Array Object?

score 2 · Answer 1

It seems that he is using this jquery plugin:
link
What he does is monitor how much the person has done scroll on the page (or 'rolled' the page in Portuguese course) and applies a css class on it to change the background and put the position fixed 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 the page from the end of the slider onwards, he will apply the class="solid-bg" 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.