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?
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!