The problem
I needed to create animated menu, which will stay always sticked to the top and will collapse or expand as user scroll
How it should look
Click the image for a live version – Wisephora.com
What do you need to implement it?
You will need a little bit Javascript and CSS. There are several ways how to implement it, at first I wanted to do it purely by using CSS transitions, but I got whole bunch of weird bugs, so finally I implemented it using mostly Javascript.
The main idea is that menu switches between two states, “expanded” and “collapsed”. I have an eventListener for scroll event (needs to be debounced btw). It calculates how far the user has scrolled, and if some predefined threshold is reached, it switches the menu to “collapsed” state. Or wice wersa when user scrolls up.
The menu is wrapped in a wrapper div, which becomes the “sticky” part via position: fixed.
Do you a simplified example to show me?
Sure 🙂 I have created a JsBin – http://jsbin.com/bavireb/1/edit?html,css,js,output. Check it out, I hope it will save you some precious time. Let me know in comments what you think. Happy coding!