Keep menu on top when “fixed” in css

Question

which is positioned 113px from the top, to be on top when users are scrolling the page.

I know there is a similar question, but I am not sure where to put the js code. (

Answer 1

Here's an example on how to do this: http://jsfiddle.net/andunai/9x74vkvw/

I've also wrapped .menu into a .menu-placeholder div to reserve place for menu prevent page from "jumping" when it changes state.

You'll need 2 CSS definitions for your menu: .static and .fixed. Here's the example CSS:

.menu {
    width: 100%;
    margin: 0px 10%;
    display: block;
}

.menu.floating {
    position: fixed;
    top: 0;
    left: 10%;
    width: 10%;
}