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;
   ...

JavaScript

$(document).ready(function() {
var fflag = true;
$(window).scroll(function() {

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

   if (top > 30 && fflag) {
       fflag = false;
       $("#header").animate({height:50}, 200);
       $("#header").animate({opacity:0.5}, 200);
   }
    if (top<30 && !fflag){
       fflag=true;
       $("#header").animate({height:100}, 200);
       $("#header").animate({opacity:1}, 200);   
   }

})});