向下滚动时如何将主导航固定在顶部

Question

First, Merry Christmas to all

I want to fix my top navigation menu bar on top when scrolling down like : csschopper.com

this happen by position: fixed; css property but when i put it in css menu will be fixed at top. this will require some javascript code but I don't know what exactly the code is. also when someone scroll down i also want to display small logo beside the menu like csschopper.com

Thanks in advance.

Answer 1

This is what the code would look like: jsFiddle In this example I created two navigation bars but you can also have one and then add an item

This is jQuery code, so make sure to load the jQuery libery:

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

Answer 2

Initial position of topbar is static. But when user scroll (you have to catch onscroll event) like this on jquery :

$(window).scroll(function());

with a scroll position bigger than header height, the Javascript modifiy the topbar position to fixed with this for example :

documentById().style.display

The same thing for the logo on left.