$(main);
function main() {
var $header = $('header');
var offset = $header.height() - $('nav').outerHeight();
$(window).on('scroll', function() {
if($(this).scrollTop() >= offset) $header.addClass('fixed');
else $header.removeClass('fixed');
});
}
<body>
<header>
<h1>Header Demo</h1>
<nav>
<a class="active" href="#">Home</a>
<a href="#">Articles</a>
<a href="#">Demos</a>
</nav>
</header>
<article>
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis felis iaculis, porta lorem id, ultrices sem. Pellentesque non ante ac turpis varius sagittis. Maecenas sed tellus eu urna fermentum egestas. Nullam fringilla lacus vitae fringilla commodo. Aliquam congue ante a sem molestie, adipiscing luctus diam dictum. Duis et odio magna. Nullam eu risus aliquam, faucibus dolor consequat, convallis sapien. Ut at enim varius, fermentum purus interdum, gravida velit.
</p>
<p>
Ut ultricies felis et felis eleifend ornare. Donec id interdum est. Nullam eu malesuada mi, sed ultricies metus. Maecenas non fermentum nisi. Nunc feugiat, nunc nec pretium commodo, odio sapien aliquam odio, vitae tempor risus justo varius tellus. Fusce facilisis sem nisl, non condimentum tortor dignissim et. Praesent pulvinar dapibus lacinia. Phasellus fermentum semper tincidunt. Vivamus porta imperdiet tincidunt. Donec imperdiet egestas egestas. Cras nec libero est. Praesent placerat dui est, sodales scelerisque massa mattis in. Aliquam et elit est. Morbi accumsan nisl in metus volutpat accumsan. Ut imperdiet sagittis libero, quis elementum eros porta nec. Aenean posuere sodales orci vestibulum bibendum.
</p>
<p>
Suspendisse vitae justo nunc. Donec vestibulum vestibulum mattis. Praesent sed dolor adipiscing, malesuada velit sed, pulvinar mauris. Maecenas vitae semper magna. Sed a pulvinar nisl, quis ornare ipsum. Curabitur sed dolor vel lacus malesuada auctor. Etiam massa est, feugiat a libero at, luctus tristique lectus. Sed dolor urna, ultricies et fringilla nec, bibendum quis erat. Vestibulum vel feugiat nisi.
</p>
<p>
Vestibulum id mauris ac metus egestas consequat vitae ac velit. Curabitur fringilla fermentum justo ac dictum. Fusce est dui, mattis nec adipiscing eget, pulvinar pulvinar erat. Suspendisse feugiat, sapien ac convallis viverra, purus sapien laoreet diam, ut dapibus lacus mauris vitae lacus. Aenean euismod imperdiet ipsum, tempor vulputate dui. Donec facilisis ante et lectus rhoncus fringilla. Vestibulum aliquam mauris nec massa tempor varius. Ut id orci a massa facilisis vestibulum feugiat sit amet erat. Donec massa sapien, viverra nec urna et, feugiat dictum neque. Aliquam eu ligula quis nisl aliquet tempor non ac purus.
</p>
<p>
Aliquam mattis nunc velit, id sagittis ligula pellentesque a. Vestibulum tincidunt velit sapien, vitae tempor libero hendrerit at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fermentum arcu vehicula neque vehicula mattis. Integer sed lacinia risus. Suspendisse sodales laoreet porta. Fusce rutrum ligula magna, et fringilla ipsum faucibus id. Donec ut malesuada elit. Mauris mollis nulla auctor dapibus feugiat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis felis iaculis, porta lorem id, ultrices sem. Pellentesque non ante ac turpis varius sagittis. Maecenas sed tellus eu urna fermentum egestas. Nullam fringilla lacus vitae fringilla commodo. Aliquam congue ante a sem molestie, adipiscing luctus diam dictum. Duis et odio magna. Nullam eu risus aliquam, faucibus dolor consequat, convallis sapien. Ut at enim varius, fermentum purus interdum, gravida velit.
</p>
<p>
Ut ultricies felis et felis eleifend ornare. Donec id interdum est. Nullam eu malesuada mi, sed ultricies metus. Maecenas non fermentum nisi. Nunc feugiat, nunc nec pretium commodo, odio sapien aliquam odio, vitae tempor risus justo varius tellus. Fusce facilisis sem nisl, non condimentum tortor dignissim et. Praesent pulvinar dapibus lacinia. Phasellus fermentum semper tincidunt. Vivamus porta imperdiet tincidunt. Donec imperdiet egestas egestas. Cras nec libero est. Praesent placerat dui est, sodales scelerisque massa mattis in. Aliquam et elit est. Morbi accumsan nisl in metus volutpat accumsan. Ut imperdiet sagittis libero, quis elementum eros porta nec. Aenean posuere sodales orci vestibulum bibendum.
</p>
<p>
Suspendisse vitae justo nunc. Donec vestibulum vestibulum mattis. Praesent sed dolor adipiscing, malesuada velit sed, pulvinar mauris. Maecenas vitae semper magna. Sed a pulvinar nisl, quis ornare ipsum. Curabitur sed dolor vel lacus malesuada auctor. Etiam massa est, feugiat a libero at, luctus tristique lectus. Sed dolor urna, ultricies et fringilla nec, bibendum quis erat. Vestibulum vel feugiat nisi.
</p>
<p>
Vestibulum id mauris ac metus egestas consequat vitae ac velit. Curabitur fringilla fermentum justo ac dictum. Fusce est dui, mattis nec adipiscing eget, pulvinar pulvinar erat. Suspendisse feugiat, sapien ac convallis viverra, purus sapien laoreet diam, ut dapibus lacus mauris vitae lacus. Aenean euismod imperdiet ipsum, tempor vulputate dui. Donec facilisis ante et lectus rhoncus fringilla. Vestibulum aliquam mauris nec massa tempor varius. Ut id orci a massa facilisis vestibulum feugiat sit amet erat. Donec massa sapien, viverra nec urna et, feugiat dictum neque. Aliquam eu ligula quis nisl aliquet tempor non ac purus.
</p>
<p>
Aliquam mattis nunc velit, id sagittis ligula pellentesque a. Vestibulum tincidunt velit sapien, vitae tempor libero hendrerit at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fermentum arcu vehicula neque vehicula mattis. Integer sed lacinia risus. Suspendisse sodales laoreet porta. Fusce rutrum ligula magna, et fringilla ipsum faucibus id. Donec ut malesuada elit. Mauris mollis nulla auctor dapibus feugiat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis felis iaculis, porta lorem id, ultrices sem. Pellentesque non ante ac turpis varius sagittis. Maecenas sed tellus eu urna fermentum egestas. Nullam fringilla lacus vitae fringilla commodo. Aliquam congue ante a sem molestie, adipiscing luctus diam dictum. Duis et odio magna. Nullam eu risus aliquam, faucibus dolor consequat, convallis sapien. Ut at enim varius, fermentum purus interdum, gravida velit.
</p>
<p>
Ut ultricies felis et felis eleifend ornare. Donec id interdum est. Nullam eu malesuada mi, sed ultricies metus. Maecenas non fermentum nisi. Nunc feugiat, nunc nec pretium commodo, odio sapien aliquam odio, vitae tempor risus justo varius tellus. Fusce facilisis sem nisl, non condimentum tortor dignissim et. Praesent pulvinar dapibus lacinia. Phasellus fermentum semper tincidunt. Vivamus porta imperdiet tincidunt. Donec imperdiet egestas egestas. Cras nec libero est. Praesent placerat dui est, sodales scelerisque massa mattis in. Aliquam et elit est. Morbi accumsan nisl in metus volutpat accumsan. Ut imperdiet sagittis libero, quis elementum eros porta nec. Aenean posuere sodales orci vestibulum bibendum.
</p>
<p>
Suspendisse vitae justo nunc. Donec vestibulum vestibulum mattis. Praesent sed dolor adipiscing, malesuada velit sed, pulvinar mauris. Maecenas vitae semper magna. Sed a pulvinar nisl, quis ornare ipsum. Curabitur sed dolor vel lacus malesuada auctor. Etiam massa est, feugiat a libero at, luctus tristique lectus. Sed dolor urna, ultricies et fringilla nec, bibendum quis erat. Vestibulum vel feugiat nisi.
</p>
<p>
Vestibulum id mauris ac metus egestas consequat vitae ac velit. Curabitur fringilla fermentum justo ac dictum. Fusce est dui, mattis nec adipiscing eget, pulvinar pulvinar erat. Suspendisse feugiat, sapien ac convallis viverra, purus sapien laoreet diam, ut dapibus lacus mauris vitae lacus. Aenean euismod imperdiet ipsum, tempor vulputate dui. Donec facilisis ante et lectus rhoncus fringilla. Vestibulum aliquam mauris nec massa tempor varius. Ut id orci a massa facilisis vestibulum feugiat sit amet erat. Donec massa sapien, viverra nec urna et, feugiat dictum neque. Aliquam eu ligula quis nisl aliquet tempor non ac purus.
</p>
<p>
Aliquam mattis nunc velit, id sagittis ligula pellentesque a. Vestibulum tincidunt velit sapien, vitae tempor libero hendrerit at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fermentum arcu vehicula neque vehicula mattis. Integer sed lacinia risus. Suspendisse sodales laoreet porta. Fusce rutrum ligula magna, et fringilla ipsum faucibus id. Donec ut malesuada elit. Mauris mollis nulla auctor dapibus feugiat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis felis iaculis, porta lorem id, ultrices sem. Pellentesque non ante ac turpis varius sagittis. Maecenas sed tellus eu urna fermentum egestas. Nullam fringilla lacus vitae fringilla commodo. Aliquam congue ante a sem molestie, adipiscing luctus diam dictum. Duis et odio magna. Nullam eu risus aliquam, faucibus dolor consequat, convallis sapien. Ut at enim varius, fermentum purus interdum, gravida velit.
</p>
<p>
Ut ultricies felis et felis eleifend ornare. Donec id interdum est. Nullam eu malesuada mi, sed ultricies metus. Maecenas non fermentum nisi. Nunc feugiat, nunc nec pretium commodo, odio sapien aliquam odio, vitae tempor risus justo varius tellus. Fusce facilisis sem nisl, non condimentum tortor dignissim et. Praesent pulvinar dapibus lacinia. Phasellus fermentum semper tincidunt. Vivamus porta imperdiet tincidunt. Donec imperdiet egestas egestas. Cras nec libero est. Praesent placerat dui est, sodales scelerisque massa mattis in. Aliquam et elit est. Morbi accumsan nisl in metus volutpat accumsan. Ut imperdiet sagittis libero, quis elementum eros porta nec. Aenean posuere sodales orci vestibulum bibendum.
</p>
<p>
Suspendisse vitae justo nunc. Donec vestibulum vestibulum mattis. Praesent sed dolor adipiscing, malesuada velit sed, pulvinar mauris. Maecenas vitae semper magna. Sed a pulvinar nisl, quis ornare ipsum. Curabitur sed dolor vel lacus malesuada auctor. Etiam massa est, feugiat a libero at, luctus tristique lectus. Sed dolor urna, ultricies et fringilla nec, bibendum quis erat. Vestibulum vel feugiat nisi.
</p>
<p>
Vestibulum id mauris ac metus egestas consequat vitae ac velit. Curabitur fringilla fermentum justo ac dictum. Fusce est dui, mattis nec adipiscing eget, pulvinar pulvinar erat. Suspendisse feugiat, sapien ac convallis viverra, purus sapien laoreet diam, ut dapibus lacus mauris vitae lacus. Aenean euismod imperdiet ipsum, tempor vulputate dui. Donec facilisis ante et lectus rhoncus fringilla. Vestibulum aliquam mauris nec massa tempor varius. Ut id orci a massa facilisis vestibulum feugiat sit amet erat. Donec massa sapien, viverra nec urna et, feugiat dictum neque. Aliquam eu ligula quis nisl aliquet tempor non ac purus.
</p>
<p>
Aliquam mattis nunc velit, id sagittis ligula pellentesque a. Vestibulum tincidunt velit sapien, vitae tempor libero hendrerit at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fermentum arcu vehicula neque vehicula mattis. Integer sed lacinia risus. Suspendisse sodales laoreet porta. Fusce rutrum ligula magna, et fringilla ipsum faucibus id. Donec ut malesuada elit. Mauris mollis nulla auctor dapibus feugiat.
</p>
</article>
<footer></footer>
</body>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
a {
color: #4e5947;
text-decoration: none;
}
header {
position: relative;
width: 100%;
height: 25em;
background: url("http://placekitten.com/g/1128/400");
-o-background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
header h1 {
padding-top: 2em;
padding-left: 2em;
}
header a {
height: 3em;
min-width: 10%;
}
header.fixed {
position: fixed;
background: none;
height: 1em;
}
header.fixed h1 { display: none; }
header.fixed a { height: auto; }
header.fixed nav { opacity: 1.0; }
nav {
position: absolute;
bottom: 0;
width: 100%;
background: #333;
opacity: 0.8;
overflow: auto;
}
nav a {
float: left;
padding: 1em;
line-height: 0;
color: #ddd;
}
nav a:hover { background: #555; }
article { margin: 1em; }
article p {
margin-top: 0.5em;
margin-bottom: 0.5em;
line-height: 1.5;
}