Scroll To Top Then Fixed Navigation Effect With jQuery and CSS

By admin / 10:31 pm, 3 Apr 2016 / jQuery / 0 Comment

Goal: To create a navigation bar, which is initially positioned on the bottom of the browser window and then stays fixed on top once it’s been scrolled to.

Let’s have a look at the HTML:

As you can see – nothing interesting here, a few sections and a standart navigation bar with unordered list items.

Now, let’s see the jQuery code:

What this snippet actually does is adding a class “fixed” once it’s been scrolled to the navigation bar. If you scroll back to the top, the class is removed. That’s it. What you have to keep in mind, though, is that you have to edit ’70’ (line 4) to the height of your menu bar (in pixels, if you change the nav height, change the .fixed class height as well) in order the code to work properly.

And finally, let’s have a look at the CSS class that I named “fixed”:

You can check the demo below to see the final effect yourself or download the source and use it in your project.

View Demo
Download Source

Any feedback is warmly welcomed. If you happen to need some help or just want to share your thoughts, I would be glad to hear from you.

Previous Post
Next Post