JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<link rel="stylesheet" href="http://thomasmaier.me/beispiel/assets/css/normalize.css">
<link rel="stylesheet" href="http://thomasmaier.me/beispiel/assets/css/style.css">
<div id="header" class="large">
	
		<header>
			<a href="#" id="logo">Neue Liberale</a>
			
			<section>
				<p id="slogan">Sozial und liberal.</p>
			</section>
		</header>

	<nav>
		<ul>
			<li><a href="#">Themen</a></li>
			<li><a href="#">Mitmachen</a></li>
			<li><a href="#">Programm</a></li>
			<li><a href="#">Partei</a></li>
			<li><a href="#">Presse</a></li>
			<li><a href="#">Geschichte</a></li>
		</ul>
	</nav>

</div>

<div id="content-wrapper">
	
	<div id="content">

		<div class="entry">
			<h2><a href="#">Unterstützungsunterschriften für Neue Liberale Hamburg</a></h2>
			<div class="date">10. November 2014</div>
	
			<p>Um vom Wahlausschuss zur Bürgerschaftswahl zugelassen zu werden, benötigen wir bis zum 11.12.2014 1.000 gültige Unterstützungsunterschriften von Hamburger Bürgern! Dafür werden wir nach unserer Erfahrung um die 1.200 Unterschriften sammeln müssen.</p>
				
			<p>Es ist jeder <a href="#">Hamburger Bürger</a> unterschriftsberechtigt, der zum Wahltag 15. Februar 2015 das <em>Wahlrecht</em> hat. Vergessen Sie nicht, dass das Mindestalter für die Wahl ab 16 ist.</p>
			
			<p>Bitte laden Sie das verlinkte <strong>Unterschriftsformular</strong>. Drucken Sie es aus, füllen Sie es aus und und wenn möglich lassen Sie es natürlich auch von Freunden, Bekannten und Verwandten unterschreiben! Schicken Sie dann die ausgefüllten Vordrucke bitte per Post (!) oder bringen Sie sie persönlich an die</p>
	
			<p>Bundesgeschäftsstelle<br>
				Hansastraße 40,<br>
				20144 Hamburg</p>
				
			<p>Wenn sie sonst beim Hamburger Wahlkampf helfen wollen wenden Sie sich an die Bundesgeschäftsstelle:</p>
			
			<p>
			anfrage(at)neueliberale.info<br>
			Hansastr. 40<br>
			20144 Hamburg<br>
			Telefon: 040 – 55555552<br>
			Telefax: 040 – 55555553</p>
			
			<p>Vielen Dank an alle...

CSS

html.noscroll,
body.noscroll {
    overflow-y:hidden;
}

JavaScript

$(document).ready(function() {
    $("hmtl, body").addClass("noscroll");
    // Storing variables under window so they can be accessed by other scripts as well
    window.logoWidth = $("#logo").width();
    window.animated = false;
    // 'animateOnce' Will run the logo animation only once if set to true
    window.animateOnce = false;
});
    
$(document).on("mousewheel", function (e) {
    var switchClass = function() {
            $("html, body").removeClass("noscroll");
            if ($(document).scrollTop() > 10) {
                $("#logo").removeAttr("style");
                $("#header").removeClass("large").addClass("small");
            } else {
                $("#header").removeClass("small").addClass("large");
            }
        };
    if( e.originalEvent.wheelDeltaY > 0 ) {
        switchClass();
        return true;
    }  else {
        var animate = window.animated;
        if( !animate ) {
            var targetW = window.logoWidth * 0.75,
                currW = $("#logo").width(),
                // You can seed the animation up or down by changing the 'increment' (the higer the faster)
                increment = 0.20;
            if( currW > targetW ) {
                $("#logo").width( currW - (currW * increment) ); 
                return false;
            } else {
                if( window.animateOnce )
                    window.animated = true;
                switchClass();
                return true; 
            }
        } else {
            switchClass();
        }
    }
});