[Solved] Fixed Menu Bar

[michaeldeplacido]

Im building a website for myself. and its a one big page website that the user can scroll through.

Ive had trouble with making the menu bar I want.

this website has a menu bar which works exactly the way id like my one to
http://alwayscreative.net/

could anyone help me with the coding for that?

[PicnicTutorials]

Well what’s the menu you want ?

[michaeldeplacido]

Just a navigation bar with 5 options on it
just like the one on that website that has ”inspiration, process etc” on it

[HenryDurdan]

The sticky nav bar?

If so, it just requires a small piece of jQuery which will attach an addition class to your nav div (for example, ‘.sticky’) and turn it to a fixed position once you scroll past the navigation with top, bottom & margins of 0.

[michaeldeplacido]

ah right thanks very much, good to know, that would work okay with sections in html5?

[HenryDurdan]

Yep, just fine. jQuery should look something like this:

$(document).ready(function() {
var stickyNavTop = $(‘.nav’).offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop > stickyNavTop) {
$(‘.nav’).addClass(‘sticky’);
} else {
$(‘.nav’).removeClass(‘sticky’);
}
};

stickyNav();

$(window).scroll(function() {
stickyNav();
});
});

[michaeldeplacido]

Right, erm. I have my navigation div
its called ”nav”. how would i put in this code to apply to it?

[michaeldeplacido]

Yeah, i ended up using div’s cause it was a bit easier

[HenryDurdan]

Just have your ‘nav’ with a class of .nav, that way you can keep the html5 style elements of the nav selector.

Check out my current design I am working on for an example of it in action.

[michaeldeplacido]

im afraid i am totally confused as how to add a class to something.

[Kuzyo]

here is tuts http://www.graphicbeacon.com/web-design-development/quick-tip-how-to-activate-a-sticky-navigation-on-document-scroll-using-jquery/

there is demo(you can simple to copy and paste) http://jsfiddle.net/LyCJg/

[Watson90]

http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect

[michaeldeplacido]

Ah great, thanks very much for everyones help :)

Especially for you patient support Henry. and thanks for the tutorials Kuyzo and Watson

[hamerw]

Great little code sample here! I am working with bootstrap3.1 and tried for 4 hours to do this sticky fixed nav trick. I did try different sticky-nav plugins but nothing worked.. I try to stay away from many plugins because they are bloated.. look at bootstrap3 scrollspy and afix.. for example.
but then I tried one last time and found your example. It is so simple and easy.. and it works great.. even in responsive mode.

Thanks!

[Author]

Posts