[Top menu fix scroll menu] Keep the menu always visible. More info in : http://jsfiddle.net/aG6DK/27/ #javascript

file.html

<header>
    <h1>header</h1>
    </header>

<div id="container">
	<nav>
    	<ul>
        	<li><a href="#">LINK 1</a></li> 
        	<li><a href="#">LINK 2</a></li> 
        	<li><a href="#">LINK 3</a></li>
            <li><a href="#">LINK 4</a></li>
        </ul>
    </nav>

    <div id="content">
        <div class="blank">randon space</div>
                
        <a name="#"><h2>LINK 1</h2></a>
        <section id="#">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus quam felis, ornare tincidunt felis consequat vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eros augue, sagittis eget fringilla sit amet, fringilla pretium nulla. In hac habitasse platea dictumst. Etiam ornare suscipit malesuada. Suspendisse potenti. Donec ac sagittis augue. Integer pretium ullamcorper metus sed facilisis. Cras id justo ornare, iaculis dui et, congue libero. Praesent quis sodales est. Donec malesuada leo vel tortor tristique pulvinar. Vestibulum vel tortor mauris. Sed rhoncus varius lectus sit amet consectetur. Curabitur sagittis odio a dolor iaculis, scelerisque pulvinar libero aliquet.</p>
       </section>
       
       <a name="#" ><h2>LINK 2</h2></a>
       <section id="#">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus quam felis, ornare tincidunt felis consequat vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eros augue, sagittis eget fringilla sit amet, fringilla pretium nulla. In hac habitasse platea dictumst. Etiam ornare suscipit malesuada. Suspendisse potenti. Donec ac sagittis augue. Integer pretium ullamcorper metus sed facilisis. Cras id justo ornare, iaculis dui et, congue libero. Praesent quis sodales est. Donec malesuada leo vel tortor tristique pulvinar. Vestibulum vel tortor mauris. Sed rhoncus varius lectus sit amet consectetur. Curabitur sagittis odio a dolor iaculis, scelerisque pulvinar libero aliquet.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus quam felis, ornare tincidunt felis consequat vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eros augue, sagittis eget fringilla sit amet, fringilla pretium nulla. In hac habitasse platea dictumst. Etiam ornare suscipit malesuada. Suspendisse potenti. Donec ac sagittis augue. Integer pretium ullamcorper metus sed facilisis. Cras id justo ornare, iaculis dui et, congue libero. Praesent quis sodales est. Donec malesuada leo vel tortor tristique pulvinar. Vestibulum vel tortor mauris. Sed rhoncus varius lectus sit amet consectetur. Curabitur sagittis odio a dolor iaculis, scelerisque pulvinar libero aliquet.</p>
           </section>
    <footer>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus quam felis, ornare tincidunt felis consequat vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eros augue, sagittis eget fringilla sit amet, fringilla pretium nulla. In hac habitasse platea dictumst. Etiam ornare suscipit malesuada. Suspendisse potenti. Donec ac sagittis augue. Integer pretium ullamcorper metus sed facilisis. Cras id justo ornare, iaculis dui et, congue libero. Praesent quis sodales est. Donec malesuada leo vel tortor tristique pulvinar. Vestibulum vel tortor mauris. Sed rhoncus varius lectus sit amet consectetur. Curabitur sagittis odio a dolor iaculis, scelerisque pulvinar libero aliquet.</p>
    </footer>
    
</div>

javascrript.js

$(document).ready(function() {
    $(document).scroll(function () {
        var scroll = $(this).scrollTop();
        var topDist = $("#container").position();
        if (scroll > topDist.top) {
            $('nav').css({"position":"fixed","top":"0"});
        } else {
            $('nav').css({"position":"static","top":"auto"});
        }
    });
});

style.css

html, body {
	width:100%;
	height:100%;
}
	
body {
	margin:0 auto;
	background-image:url(http://cdn.androidpolice.com/wp-content/uploads/2013/07/nexusae0_wallpaper_01.jpg);
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-attachment:fixed;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:100%;
	color:#FFFFFF;
}

/*----------HEADER----------*/

header {
	width:100%;
	margin:0 auto;
	text-align:center;
	height:100%;
	max-height:100%;
	position:absolute;
	top:0;
}

/*----------CONTAINER----------*/

#container {
margin:0 auto;
background-color:white;
position:absolute;
top:100%;
}

/*----------NAVIGATION BAR----------*/

nav {
	width:100%;
	height:4em;
	line-height:4em;
	background-color:#000000;
	text-align:center;

}
	nav ul {
		margin:0;
		border:0;
		list-style-type:none;
	}
	nav ul li {
		display:inline-block;
		margin:0;
		border:0;
	}
	nav ul li:hover {
		background-color:#2b2b2b;
	}

/*-----------CONTENT----------*/

/*blank div - per separare i contenuti*/
.blank {
	background-color:white;
	color:black;
	padding:1em;
	height:10em;
}

/*SECTION TITLE*/
h2 {
	background-color:#000000;;
	color:white;
	margin:0 0 0 0;
	text-align:center;
}

/*SECTIONS*/
section {
	background-color:white;
	color:black;
	margin:0 auto;
}

/*----------FOOTER-----------*/

footer {
	background-color:#000000;
}