This guide will show you how to keep your navigation at the top as you scroll down the page. You can see a demonstration on this page by scrolling down. Notice how the navigation scrolls down with you. There is very little code involved, so here we go!
small payday loans very cheap
- Determine what your navigation #ID is. In this example, my navigation ID is #navi You should replace mine with your own. There is a good plugin for Firefox and Chrome called Web Developer, which allows you to “Display Element Information” when you click on an element, such as navigation. I recommend using this plugin to determine your navigation #ID.
- Add this jQuery code near the footer/bottom of your site.:
/**************************************** * Floating Navigation jQuery feature ****************************************/ $(function() { // get initial top offset of navigation var floating_navigation_offset_top = $('#navi').offset().top; // define the floating navigation function var floating_navigation = function(){ // current vertical position from the top var scroll_top = $(window).scrollTop(); // if scrolled more than the navigation, change its // position to fixed to float to top, otherwise change // it back to relative if (scroll_top > floating_navigation_offset_top) { $('#navi').css({ 'position': 'fixed', 'top':0}); } else { $('#navi').css({ 'position': 'relative' }); } }; // run function on load floating_navigation(); // run function every time you scroll $(window).scroll(function() { floating_navigation(); }); }); - Replace #navi with your own navigation ID on the lines highlighted above.
- OPTIONAL: To ensure your navigation stays on top, add a high z-index. Open your CSS stylesheet and find your navigation CSS and add this property:
z-index:99999;
That’s all! Feel free to leave your site URLs where you’ve used this feature. Also, if you have any recommendations for future how-to guides please contact me with your ideas.
Thanks bro! your code worked.
Could you please check why it is not working for me at:
http://javaexperience.com/
I think the jQuery event binding for scrolling is not happening for me.
this seems to be what I’m looking for. But wondering if when the menu floated, I want to add logo beside the menu(left side) or search box on the right end part?
something this site have – ourtuts dot com. Notice the floating menu. It changes and floats when we scroll down. Do you know how to do this or knows a tutorial of such kind?
many thanx!!! finally found something that works!
the codes work but only on the first button!im still student hope you can help me.thank you
Not sure what you mean. Could you provide a link to where this isn’t working?
Clever programming sir!
However, my navbar consists of 7 seperate buttons. I know the navigation #ID of each one but this program only floats 1. What do I need to add to move all 7? Thanks….. Phil
Wrap all the seperate buttons in one div.
e.g.
Then use “Navbar” as the id.
Sorry, I don’t know what you mean. I’m no good at this type of programming. Can you explain further?
i cant get it to work
im pretty sure im retarded
silly question, which file should the jquery code be added to ?
You could include it directly on each page between
Hey man, awesome code!
I’ve got a similar one on my site at current (that im working on perfecting) and so far this particular tutee/how to is the only one i’ve seen that does what I’m attempting to do.
Essentially having a fixed position upon page load (like yours along the top) then after scrolling sticking along the top(ish) of the page.
My only query is, where you have this example sitting directly along the top of the page as it scrolls, is it possible to give it a ‘slight’ buffer/margin from the top? Just so as that it looks slightly separate?
Cheers!
To get a buffer/margin from the top you could do this:
if (scroll_top > (floating_navigation_offset_top – 10)) {
$(‘#navi’).css({ ‘position’: ‘fixed’, ‘top’:10});
Heya,
I tried adding/removing and changing the code etc. But didn’t seem to work, apologies for the annoyance
The page i’m working on is: http://www.korthcore.com/destiny/
As you can see upon initial page load it sits perfectly where I want it to (155px from the top), after this however it KEEPS that 155px buffer, which is where I’d prefer it to be… Well about 25px after scroll passes that point.
jQuery for reference:
http://jsfiddle.net/yGkuq/
Other than that, the thing itself works perfectly fine, the only oddity is the disappearance of the side border when the Menu Opens/Closes.
Hello this is fantastic, but is there any way I can do it along the bottom of a page? And it adjusts to the size of the browser?
Hey, thanks for sharing! But I got a problem, it moves and works well, but the links (buttons) of my navigation bar doesnt work! HELP!
What do you mean by “doesn’t work”? Do they not go to other pages when clicked? What’s your URL so we can see?
Here is it! http://rebecalovesvanilla.blogspot.com/
It turned out to be a z-index issue. In the javascript replace:
$(‘.tabs-outer’).css({ ‘position’: ‘fixed’, ‘top’:0});
with:
$(‘.tabs-outer’).css({ ‘position’: ‘fixed’, ‘z-index’: 999999, ‘top’:0});
I noticed that when scrolling slowly the nav bar stops the page jumps under it quickly. When I try to use your code the nar just keep jumping up and down if the page is not long. Other pages work just fine. I notice on this page it does the jump thing also just that the page is long enough to get past it.
Any ideas?
Dan
OK answering my own question. Someone may run into the same issue. I replaced the navi div with new empty navi2 div to take its place when it stuck to the top. Then hide div when I scrolled back down.
Very good but I would recommend either positioning the #navi in another div of the same size or instead of “relative” positioning you use “absolute” because otherwise when you scroll down the rest of the content jumps up as the div is removed from document flow. If you need the tag centred then I found a great way to centre tags with absolute positioning here: http://www.jocoxdesign.co.uk/how-to-center-a-div-with-absolute-positioning/
i am having a problem where it doesn’t show up until you scroll
Thank you so much for this! Awesome.
Question: If I’d like the new fixed navigation to start further down (ie. #navi changes to fixed at 200px instead of immediately), how could I implement that into this code? Does that make sense?
Thanks so much!
Brian
Nice. I just had to add the following tags
added to Body site code injection in Sandvox, works well. Renders to the left, but I’m not bothered about that.
Sir please help me as how to configure the code for my website because it does not float in my website.