$(window).scroll(function(){
if ($(window).scrollTop() >= 300) {
$('nav').addClass('fixed-header');
}
else {
$('nav').removeClass('fixed-header');
}
});header {
height:360px;
z-index:10;
}
.header-banner {
background-color: #333;
background-image: url('http://37.media.tumblr.com/8b4969985e84b2aa1ac8d3449475f1af/tumblr_n3iftvUesn1snvqtdo1_1280.jpg');
background-position: center -300px;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 300px;
}
header .logo {
background-color: transparent;
background-image: url('http://www.futhead.com/static//img/14/clubs/1887.png');
background-position: center top;
background-repeat: no-repeat;
position: absolute;
top: 72px;
height: 256px;
width: 256px;
}
header h1 {
position: absolute;
top: 72px;
left: 240px;
color: #fff;
}
.fixed-header {
position: fixed;
top:0; left:0;
width: 100%;
}
nav {
width:100%;
height:60px;
background: #292f36;
postion:fixed;
z-index:10;
}
nav ul {
list-style-type: none;
margin: 0 auto;
padding-left:0;
text-align:right;
width: 960px;
}
nav ul li {
display: inline-block;
line-height: 60px;
margin-left: 10px;
}
nav ul li a {
text-decoration: none;
color: #a9abae;
}
/* demo */
.content{ width: 960px; max-width: 100%; margin:0 auto; padding-top: 60px; }
article { width: 720px; float: left; }
article p:first-of-type { margin-top: 0; }
aside { width: 120px; float: right; }
aside img { max-width: 100%; }
body {
color: #292f36;
font-family: helvetica;
line-height: 1.6;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="header-banner">
<a href="/" class="logo"></a>
<h1>Art in Finland</h1>
</div>
<nav>
<ul>
<li><a href="/archive">Archive</a></li>
<li><a href="/events">Events</a></li>
<li><a href="/contact">Contact</a></li>
<ul>
</nav>
</header><header>
<div class="header-banner">
<a href="/" class="logo"></a>
<h1>Art in Finland</h1>
</div>
<nav>
<ul>
<li><a href="/archive">Archive</a></li>
<li><a href="/events">Events</a></li>
<li><a href="/contact">Contact</a></li>
<ul>
</nav>
</header>
CSS
header {
height:360px;
z-index:10;
}
.header-banner {
background-color: #333;
background-image: url('http://37.media.tumblr.com/8b4969985e84b2aa1ac8d3449475f1af/tumblr_n3iftvUesn1snvqtdo1_1280.jpg');
background-position: center -300px;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 300px;
}
header .logo {
background-color: transparent;
background-image: url('http://www.futhead.com/static//img/14/clubs/1887.png');
background-position: center top;
background-repeat: no-repeat;
position: absolute;
top: 72px;
height: 256px;
width: 256px;
}
header h1 {
position: absolute;
top: 72px;
left: 240px;
color: #fff;
}
.fixed-header {
position: fixed;
top:0; left:0;
width: 100%;
}
nav {
width:100%;
height:60px;
background: #292f36;
postion:fixed;
z-index:10;
}
nav ul {
list-style-type: none;
margin: 0 auto;
padding-left:0;
text-align:right;
width: 960px;
}
nav ul li {
display: inline-block;
line-height: 60px;
margin-left: 10px;
}
nav ul li a {
text-decoration: none;
color: #a9abae;
}
/* demo */
.content{ width: 960px; max-width: 100%; margin:0 auto; padding-top: 60px; }
article { width: 720px; float: left; }
article p:first-of-type { margin-top: 0; }
aside { width: 120px; float: right; }
aside img { max-width: 100%; }
body {
color: #292f36;
font-family: helvetica;
line-height: 1.6;
}
jQuery
$(window).scroll(function(){
if ($(window).scrollTop() >= 300) {
$('nav').addClass('fixed-header');
}
else {
$('nav').removeClass('fixed-header');
}
});
