JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="header-banner">
        <a href="/" class="logo"></a>
        <!--
        <h1>Art in Finland</h1>
        -->
    </div>
    <div class="clear"></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>
<section class="content">
    <article>
        <p>Wolf vinyl hella, jean shorts disrupt skateboard master cleanse hashtag iPhone. Pop-up bicycle rights Brooklyn iPhone Helvetica kitsch Godard, XOXO blog aesthetic beard quinoa. Fixie kale chips PBR&B twee, YOLO raw denim before they sold out photo booth bespoke seitan food truck. Ethical chia before they sold out, trust fund viral ennui you probably haven't heard of them cred bitters mixtape semiotics deep v jean shorts pork belly occupy shabby chic sriracha ethnic normcore bicycle rights single-origin coffee slow-carb jean shorts. Twee ethnic mumblecore, Carles banh mi slow-carb pour-over organic. Ethical tofu narwhal, hoodie viral ennui tousled paleo. Butcher chia cray iPhone keytar, sustainable Cosby sweater literally try-hard put a bird on it photo booth ethical street art literally semiotics.</p>

        <img src="http://placehold.it/660x150">

        <p>Twee 8-bit Blue Bottle, wolf tattooed distillery retro dreamcatcher put a bird on it letterpress asymmetrical actually Austin crucifix cred. Selfies ethical butcher vegan, umami bitters literally wolf seitan +1 Intelligentsia Pitchfork. Godard mixtape pork belly Pitchfork, fap food truck wolf banh mi post-ironic. Narwhal letterpress Etsy direct trade irony pour-over. Cosby sweater literally Vice DIY butcher selvage shabby chic, XOXO hashtag letterpress single-origin coffee. Artisan Portland disrupt swag small batch chambray, Neutra bespoke Wes Anderson tofu VHS ennui. Cosby sweater letterpress 90's shabby chic cornhole, literally YOLO sartorial bitters Blue Bottle...

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;
  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;
  
  z-index:10;
}

nav ul { 
  list-style-type: none;
  margin: 0 auto;
  padding-left:0;
  text-align:right;
  width: 960px; 
  max-width: 100%;
}
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;
}


/* resets */
body { margin:0px; padding:0px; }

JavaScript

$(window).scroll(function () {
        if ($(window).scrollTop() >= 300) {
            $('nav').addClass('fixed-header');
        }
        else {
            $('nav').removeClass('fixed-header');
        }
    });