JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>

   <div id="header">
     
   </div>

   <div id="box1">
    <div class="logotext">
     <span class="text">Example</span><span class="text2">.com</span>
     <p class="untertitel">Example</p>
    </div>

    <div class="buttons">
      <a id="infobutton" href="#puffer" style="text-decoration: none; color: #FFFFFF;">Button Example</a>

      <a id="kontaktbutton" href="#puffer2" style="text-decoration: none; color: #FFFFFF;">Example</a>
    </div>
    <div id="puffer"></div>
   </div>

   <div id="box2">
    <a id="navbutton" href="#box1" style="text-decoration: none; color: #FFFFFF;"><div class="dreieck"></div></a>
    <div id="puffer2"></div>
   </div>

   <div id="box3">
    <a id="navbutton" href="#box1" style="text-decoration: none; color: #FFFFFF;"><div class="dreieck"></div></a>

   </div>

   <div class="footer">
    <div class="copyright">
     <span style="margin: 0; color: #FFFFFF; float: left; margin-left: 20px; font-family: “cracked-johnnie”, sans-serif;">&copy; Example</span>
     <span style="margin: 0; color: #F58C1F; float: left; margin-left: 10px; font-family: “Exo”, sans-serif;">2014</span>
     <span style="margin: 0; color: #CCC; float: right; margin-right: 20px; font-family: “cracked-johnnie”, sans-serif; font-size: 25px; -moz-user-select: none; -khtml-user-select: none; cursor: default;">X</span>
    </div>
   </div>

  </body>
</html>

CSS

body {
 background: #FFFFFF;
 margin: 0;
}

@font-face {
 font-family: “Exo”;
 src: url(../schriften/Exo-ExtraLight.otf);
}

@font-face {
 font-family: “Exo-Fat”;
 src: url(../schriften/Exo-Bold.otf);
}

@font-face {
 font-family: “cracked-johnnie”;
 src: url(../schriften/cracked-johnnie.ttf);
}

#header {
 height: 100px;
 width: 100%;
 background-color: #F8FCF8;
 border-bottom: 2px black solid;
 opacity: 1;
 position: fixed;
 z-index: 2;
}

.logo {
 outline: none;
}

#logoimage {
 margin-top: -40px;
 top: 50%;
 position: relative;
 margin-left: 10px;
}

.footer {
 height: 40px;
 width: 100%;
 background-color: gray;
 position: relative;
 border-top: 2px black solid;
}

#box1 {
 height: 450px;
 padding: 50px;
 background-color: #871717;
 position: static;
 z-index: 1;
}

#box2 {
 height: 600px;
 padding-left: 50px;
 padding-right: 50px;
 background-color: #C5D637;
 position: static;
 z-index: 1;
}

#box3 {
 height: 600px;
 padding-left: 50px;
 padding-right: 50px;
 padding-bottom: 50px;
 background-color: #37B9D6;
 position: static;
 z-index: 1;
}

.buttons {
 width: 450px;
 margin-left: -225px;
 top: 70%;
 left: 50%;
 position: relative;
}

#infobutton {
 position: absolute;
 background-color: #F58C1F;
 border-radius: 5px;
 text-align: center;
 width: 280px;
 padding-top: 10px;
 padding-bottom: 10px;

 cursor: pointer;
 outline: none;
 -moz-user-select: none;
 -khtml-user-select: none;
 display: block;
 font-family: “Exo”, sans-serif;
 font-size: 1.4em;
 -webkit-transition: all .25s ease;
 -moz-transition: all .25s ease;
 -ms-transition: all .25s ease;
 -o-transition: all .25s ease;
 transition: all .25s ease;
}

#kontaktbutton {
 position: relative;
 margin-left: 30px;
 border: 3px #FFFFFF solid;
 border-radius: 5px;
 text-align: center;
 width: 140px;
 padding-top: 7px;
 padding-bottom: 7px;
 float: right;

 cursor: pointer;
 outline: none;
 -moz-user-select: none;
 -khtml-user-select: none;
 display: block;
 font-family: “Exo”, sans-serif;
 font-size: 1.4em;
...

JavaScript

$(document).ready(function() {

$(window).scroll(function() {

   var top = $(document).scrollTop();

   if (top > 30) {

       $("#header").animate({height:50}, 200);
       $("#header").animate({opacity:0.5}, 200);
       $("#logoimage").animate({height:40}, 200);
       $("#logoimage").delay(20).queue(function() { $(this).css({'margin-top':'-20px'}); $(this).dequeue();});

       }

})});