This is what it seems you want
What you want is a sticky menu which requires javascript to find the current position of the page in the viewport and change the CSS or class to make it fixed. This is a bad example because there is no div that is made visible after you scroll and make the element fixed to prevent the page content below to fill in where the menubar was. This can be done simply by using jQuery to make this hidden div visible. If you need code then just ask.
It is called a sticky menu and I always forget what it is called. 🙂
How I remember is usually spending some time on Google searching specifically for what I want until I find it. Don’t make StackOverflow your default goto for help because that is how you can get banned. You need to be specific and provide code on something like JSFiddle or spend some time making a visual example or find a site that does what you want. Many sites like Facebook use this technique and it is quite common. If this doesn’t make sense then you should go to W3Schools and read up on some Javascript and CSS and find some tutorials on jQuery.
For your fiddle, you need to go and include jQuery in your head: http://jsfiddle.net/b2550/07xe5tLf/1/
I JSFiddle it is as simple as making that your framework in the sidebar and in your code you need to include this in your head (as I said above in the comments)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
10
solved fixed divs inside container