Add fadeOut in sticky.js.

Question

I have a one page website with three different sections. Every section has a sub-menu on top.

When scroll I use "sticky.js" to stick the menu on top of website, when the section touches the top of page.

How can I fade the previous menu before the other one sticks.

Just like it happens on this site, on screen bigger than 1024px.

Thank you in advance.

Answer 1

sticky.js add a class name is-sticky when the element change to sticky mode. So you can use it to switch your css properties. I write an example to toggle two menu by the class name. http://jsfiddle.net/cwshp/

<div id="menu">
    <div id="static-menu">This is static menu.</div>
    <div id="sticky-menu">This is stick menu.</div>
</div>

CSS

html, body{
    height: 110%;
}

#menu {
    position: relative;
    width: 100%;
}

#static-menu {
    background-color: green;
}

#sticky-menu {
    background-color: red;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}
.is-sticky #sticky-menu {
    opacity: 1;
}

Answer 2

It would be better if you explain about what you have done so far..

You can use CSS-opacity property for your sub menu, with default value 1. opacity: 1;

And at some point when you scroll, you will start decreasing the opacity until 0(it should be when your css property for previous sub menu top + height == next sub menu top)..

Check this jsFiddle: http://jsfiddle.net/KzGJr/2/