Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

Top fixed navigation

Kodhus >
Like & share to be notified of the new tips & tutorials:
Difficulty Level

In this tutorial, we go one step farther than previous tutorials which were mostly using css, to utilize javascript in order to create a nice user experience in our single page website. In this tutorial we use jQuery and play with $(window).scrollTop() and $(window).height() to achieve the effect.


First off, we have a header and a navigation for our sections in the page as follow:

Pretty easy. Also we have couple of sections defined in the main.

Javascript – Making it fixed when scrolled to top

So the idea here is that when we scroll the page and the top of our menu section reaches the top of the browser window, we change the position of it to be fixed on the screen when page is farther scrolled down so that the menu is always visible in the page.
This is one of the well known user experience techniques that is used in many websites.
We use JQuery to do this. Let’s take a look at the code.

and the fixed class is as follow:

Let me know if you have any questions or comments in the comment section bellow.