html - Once nav bar reached top of window, how to keep it there? -

html - Once nav bar reached top of window, how to keep it there? -

here sample js fiddle. nav bar right below section says "hello world", , content below nav bar. there way, when scrolling downwards see content, 1 time nav bar reaches top of window maintain there? stays fixed top 1 time reaches top. no matter how far scroll down, wont scroll off page, prepare top 1 time gets there. help? much!

jsfiddle: http://jsfiddle.net/ptx4e/

here css js fiddle:

#head{ width:100%; height:200px; } h1{ text-align:center; padding-top:70px; } nav{ background-color:black; overflow:hidden; width:100%; } nav ul{ color:white; list-style:none; text-align:center; margin:0; } nav ul li{ display:inline-block; padding:1% 6%; } nav ul li:hover{ background-color:tomato; }

a little bit of jquery can accomplish sticky header. check demo.

here jquery code.

$(window).scroll(function () { if ($(window).scrolltop() > 280) { $('#nav_bar').addclass('navbar-fixed'); } if ($(window).scrolltop() < 281) { $('#nav_bar').removeclass('navbar-fixed'); } });

html css fixed nav