Schrumpfender Header bei Scroll ✤✤✤(✤)

Ich bin momentan am Designen einer Website, bei der wir einen spannenden Post-Header machen wollen. Herausgekommen ist beim Spielen folgendes und ich finde es ziemlich cool, weswegen ich dacht, dass ich gleich mal drüber schreiben könnte.

See the Pen Shrinking Sticky Header by Myri (@mynimi) on CodePen.

Wie ihr sehen könnt, machen wir hier einen Header, der beim Scrollen schrumpft und dann als klassische Navbar endet. Gemacht ist das Ganze relativ einfach.

Markup

Das Markup ist ganz simpel. Wir haben Header und Wrapper. Im Wrapper platzieren wir all unseren Inhalt und im Header unsere Navigation, in der wir unsere Links einfügen.

Für den Effekt mit der Farbe fügen wir noch einen div-Container ein, dieser ist bloss für die Farbe zuständig. Schöner wäre es, wenn wir das mit der Farbe in einem pseudoelement machen könnten (so würde ich es bei einem hover tun), doch da die Pseudoelemente nicht Teil des DOM sind, können wir sie mit javascript nicht bearbeiten und müssen diesen Container einfügen.

<header class="header">
    <nav>
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
        <a href="#">Item 4</a>
    </nav>
    <div class="bg"></div>
</header>
<div class="wrapper">
    <div class="content">
        <!-- Inhalt -->
    </div>
</div>

Styles

Die Styles sind sehr simpel

/* setze Hintergrungbild und fixiere oben */
.header {
  background-image: url("http://goo.gl/jZh3X5");
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* Platziere oberhalb des Menüs und gebe line-height in der Höhe der Nav, sodass der Text vertikal zentriert wird */
.header nav {
  z-index: 10;
  position: relative;
  line-height: 40px;
}

/* Link style */
.header nav a {
  margin: 0 10px;
  color: white;
  -webkit-transition: .3s all ease;
          transition: .3s all ease;
}
.header nav a:first-of-type {
  margin-left: 0;
}
.header nav a:last-of-type {
  margin-right: 0;
}
.header nav a:hover {
  opacity: .7;
}

/* Vergebe Hintergrundfarbe und lege über den ganzen Header drüber */
.header .bg {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: #2A2A1E;
}

jQuery

Und zum Schluss noch jQuery, hiermit machen wir alles, was den Effekt ausmacht.

$(document).ready(function () {
    'use strict';
    // Variabeln
    var windowHeight = $(window).height(),
        // Einstellungen
        colorBg = 'bg',
        headerClass = 'header',
        headerHeight = windowHeight * 0.6, // = 60vh
        navHeight = 40, // no px here
        // Zeitsparer
        body = $('body'),
        background = $('.'+headerClass + ' ' + '.'+colorBg),
        header = $(headerClass);
        
    // setze body höhe, damit man scrollen kann 
    body.css({
        'min-height': windowHeight * 3
    });

    $(window).resize(function () {
        // Vergebe Header Höhe und minimale Höhe, in Form von Navigations-Höhe
        header.css({
            'height': headerHeight,
            'min-height': navHeight
        });

        // Füge Header Höhe als Margin des Bodys ein, sodass der Header nicht überm Content hängt
        body.css({
            'margin-top': headerHeight
        });

        // Farbcontainer transparent machen
        background.css({ 'opacity': 0 });

  $(window).scroll(function () {
            var scrollTop = $(this).scrollTop(),
                // limit, an dieser Position soll der Farbcontainer eine Deckkraft von 100% haben
                limit = headerHeight - navHeight; 
            
            // entferne für jeden gescrollten Pixel einen Pixel der Header-Höhe, da min-height vorhanden ist, hält die Bewegung bei der Höher der Navigation an.
            header.height(headerHeight - scrollTop);
            

            // erhöhe die Deckkraft des Farbcontainers, bis die Navbar deckend farbig ist
            if (scrollTop <= limit) {
                background.css({ 'opacity' : (scrollTop/limit) }); 
   }
  });
 }).resize();
});

Verwendung

Falls ihr verwenden wollt, habe ich ganz viele Variablen erstellt, falls ihr Klassen ändern wollt und versucht den Code zu kommentieren.