Bruce's Bugs

by lukerichison

HTML

<header id="splash">
    <h1><img src="http://www.clker.com/cliparts/g/0/T/6/3/M/fly-fishing-com-ua-hi.png" alt="Bruce's Bugs"></h1>
    <h2>I tie flies for celebrities and celebrity pets.</h2>
</header>
<nav id="main-nav">
  <a href="#">About</a>
  <a href="#">Shop</a>
  <a class="logo" href="/"><img src="https://i.pinimg.com/736x/3d/5d/9a/3d5d9a62ce65a14a3d5371b290cd3764--fishing-tips-fly-fishing.jpg" alt="Bruce's Bugs"></a>
  <a href="#">Flies</a>
  <a href="#">Other</a>
</nav>
<main>
  <section>
    <article>
    <p>Lorem ipsum dolor sit amet, consequat lacinia aenean tortor suscipit vel vel, vestibulum orci dolor ultrices, ligula cum congue neque. Commodo donec nec. Orci pellentesque molestie duis sit adipiscing, porttitor metus augue. Eu dolor semper phasellus sodales pellentesque auctor. Gravida nulla, sed tellus, lacus mauris ipsum laoreet neque, suspendisse nec donec lacus, erat nisl sed donec. Neque non nec vulputate id tincidunt, viverra proin suscipit purus. Luctus lectus justo suspendisse, accumsan in vel, quam volutpat velit vestibulum integer, ut temporibus quis aliquam donec wisi. Amet urna diam, ac pede lacus maecenas, vestibulum diam velit quis quis sed ligula. Dui velit dolor mauris dignissim odio. Elit praesent, quisque interdum aptent ipsum ut malesuada, metus proin aliquet lorem sed vitae luctus. Adipiscing nam mauris a wisi, sit praesent duis porta et. Ipsum nunc posuere pede, eu porttitor.</p>
      <p>Ut volutpat in, elit massa. Ante dictum donec, cras eget sit, lobortis pede sed vestibulum. Cras adipiscing, magnis sed turpis euismod in mattis. Venenatis integer sit enim justo mattis eget, donec sagittis amet, vitae vulputate lorem neque augue. Maecenas faucibus semper, egestas nec tempus lacinia turpis. Non velit aliquam. Nulla at tellus pharetra, vestibulum amet, nisl dictum mi amet, lacinia vitae pellentesque aliquam, quis in tortor. Nulla erat sed. Est morbi gravida pede. Elit suspendisse, pellentesque morbi nec a, in eros amet ut...

CSS

body {
  margin: 0;
  padding: 0;
}
#splash {
  z-index: 11;
  height: 100vh;
  width: 100%;
  background: url("https://static1.squarespace.com/static/518ff6b3e4b0cf61a012d1dd/t/59dbe63ed2b857fa058b35a0/1507583574628/Bucky+-+Fly+Fishing+Collaborative-93.jpg?format=2500w") no-repeat center;
  background-size: cover;
  position: relative;
}
#splash h1,
#splash h2 {
  width: 60%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translate(-50%, -50%) ;
}
#splash h1 {
  top: 50%;
}
#splash h1 img {
  max-width: 100%;
  max-height: 50vh;
}
#splash h2 {
  bottom: 10%;
}
#main-nav.sticky {
  position: fixed;
  top: 0;
}
#main-nav {
  z-index: 10;
  text-align: center;
  width: 100vw;
  background-color: white;
  box-shadow: -0.125em 0.125em 1em 0.125em rgba(0, 0, 0, 0.2);;
}
#main-nav a {
  display: inline-block;
  vertical-align: top;
  line-height: 5em;
}
#main-nav a.logo {
  line-height: 0;
}
#main-nav a.logo img {
  height: 5em;
}

JavaScript

var $nav = $('#main-nav');
var $win = $(window);
var winH = $win.height();   // Get the window height.

$win.on("scroll", function () {
  if ($(this).scrollTop() > winH ) {
    $nav.addClass("sticky");
  } else {
    $nav.removeClass("sticky");
  }
}).on("resize", function(){ // If the user resizes the window
  winH = $(this).height(); // you'll need the new height value
});