JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<section id="menubar">
    <ul>
        <li><a class="menubutton" href="#menu"><img src="assets/menu.png"/></a>

        </li>
    </ul>
</section>
<header>
    
<h1>Webseite</h1>

</header>
<section id='placeholder'>
    <ul></ul>
</section>
<nav id="navi">
    <ul>
        <li><a href="#">Startseite</a>

        </li>
        <li><a href="#">blabla</a>

        </li>
        <li><a href="#">blabla</a>

        </li>
        <li><a href="#">blabla</a>

        </li>
        <li><a href="#">blabla</a>

        </li>
    </ul>
</nav>
<section id="main">
    <article>
        
<h2>H2-Überschrift</h2>

        <p>p-Text</p>
        <p>p-Text</p>
        <p>p-Text</p>
    </article>
    <article>
        
<h2>H2-Überschrift</h2>

        <p>p-Text</p>
        <p>p-Text</p>
        <p>p-Text</p>
    </article>
    <article>
        
<h2>H2-Überschrift</h2>

        <p>p-Text</p>
        <p>p-Text</p>
        <p>p-Text</p>
    </article>
    <article>
        
<h2>H2-Überschrift</h2>

        <p>p-Text</p>
        <p>p-Text</p>
        <p>p-Text</p>
    </article>
</section>
<footer>
    <ul>
        <li>&copy; 2015</li>
        <li><a href="#">Impressum</a>

        </li>
    </ul>
</footer>

CSS

html {
    overflow-y:scroll;
}
body {
    background:#dcdcdc;
    margin:0em;
    padding:0em;
    font-size:100%;
    font-family:Helvetica;
}
h1 {
    font-size:2.5em;
    line-height:3.8em;
    font-weight:100;
    color:#E2DBDB;
    margin:0em;
}
h2 {
    font-size:2em;
    font-weight:100;
    color:#2F2D2C;
    margin:0em;
}
p {
    line-height:1.25em;
    font-weight:100;
    color:#2F2D2C;
    margin:0em;
    padding:1.25em;
    text-align:justify;
}
ul {
    margin:0px;
    padding:0px;
}
li {
    list-style:square;
    font-family:Helvetica;
    font-weight:100;
    color:#2F2D2C;
    line-height:1.25em;
    margin:0em;
    padding:0em;
    margin:0.313em 0em 0.313em 0em;
}
a {
    text-decoration: none;
}
#main a, footer a {
    color:#E7590B;
}
#menubar {
    display:block;
    background:#FFFFFF;
}
#menubar ul {
    display:block;
    width:2em;
    padding:0.9em;
}
#menubar ul li {
    display:inline;
}
#menubar ul li a.menubutton {
    display:none;
}
header {
    display:block;
    background:#2F2C2C;
    text-align:center;
}
nav {
    display:block;
    height:2.5em;
    background:#FFFFFF;
    text-align:center;
}
nav ul {
    display:block;
}
nav ul li {
    display:inline;
    margin:0em 0.188em 0em 0.188em;
}
nav ul li a {
    color:#454040;
    font-size: 1.125em;
    line-height:2.5em;
    padding:0.563em 0.938em 0.375em 0.983em;
    transition:background 0.4s;
    -webkit-transition:background 0.4s;
}
nav ul li a:hover {
    background:#DBD9D8;
    border-bottom: 0.188em solid #E7590B;
}
#placeholder {
    display:none;
}
/* Content Area */
 #main {
    display:block;
    margin:0 auto;
    padding:0.5em 0 3em 0;
}
#main article {
    display:block;
    background:#f1f1f1;
    vertical-align: top;
    margin:0 auto;
    padding:0.8em;
    width:60em;
    border:1px solid #E7590B;
}
#portfolio {
    text-align:center;
}
#portfolio img {
    margin:8px;
    width:18.75em;
}
#main article h2 {
    padding:1em 1.8em 1em 1.8em;
   ...

JavaScript

$(document).ready(function () {

    var width = 520;
    var oben = 0;

    $(window).scroll(function () {
        var top = 180;

        if ($(window).scrollTop() >= top) {
            $("#navi").css({
                'position': 'fixed',
                    'top': '0',
                    'width': '100%',
                    'background': '#fff',
                    'margin': '0em',
            })
            $("#placeholder").css({
                'height': '2.5em',
                    'width': '100%',
                    'margin': '0em',
                    'display': 'block'
            })
        }
        if ($(window).scrollTop() < top) {
            $('#navi').removeAttr('style');
            $('#placeholder').removeAttr('style');
        }

    })
})

$(document).ready(function () {
    $('.menubutton').click(function () {
        $('nav').slideToggle('slow');
    });
});