JSFiddle - React, Tailwind, and code Playground

HTML

<div id="headsection_wrapper">
    <div id="headsection">
        <div class="headesction_container">
            <img src="/wp-content/themes/SWE01/images/Test.jpg" width="100%">
        </div>
    </div>
    <div id="navigation_wrapper">
        <div id="navigation">
            <div class="navigation_container">
                <table width="100%">
                    <tr>
                        <td width="15%">
                            <img src="/wp-content/themes/SWE01/images/Logo.png">
                        </td>
                        <td width="60%" align="center">
                             <h1>Swiss Wrestling Entertainment</h1>

                        </td>
                        <td width="25%" align="right">
                            <mainnav>
                                <ul>
                                    <li class="cat1"> <a href="/">Home</a>

                                        <ul id="ol">
                                            <li><a href="/news">News</a>
                                            </li>
                                            <li><a href="/kontakt">Kontakt</a>
                                            </li>
                                            <li><a href="/links">Links</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="cat2"> <a href="#">SWE</a>

                                        <ul id="ol">
                                            <li><a href="#">Shows</a>
                                            </li>
                                            <li><a href="#">Roster</a>
                                            </li>
                                            <li><a href="#">Titel</a>
                                            </li>
                                        </ul>
                                    </li>
          ...

CSS

body {
    background: #ffffff;
    color: #000000;
    font-family: Tahoma;
    font-size: 14px;
    line-height: 120%;
    font-style: none;
    width: 100%;
    height: 100%;
    margin: 0;
}
a:link, a:visited, a:active {
    color: #b2201c;
    text-decoration: none;
    font-weight: bold;
}
a:hover {
    color: #b2201c;
    text-decoration: none;
}
b, strong {
    color: #000000;
    letter-spacing: 2px;
}
i, em {
    color: #000000;
}
blockquote {
    border-left: #b2201c solid 2px;
    padding-left: 5px;
    padding-bottom: 1px;
}
/* ~HEADLINES~ */
 h2 {
    height: auto;
    padding-bottom: 3px;
    font-family: Fugaz One;
    font-size: 30px;
    color: #000000 !important;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px grey solid;
}
h3 {
    font-family: Fugaz One;
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
}
h1 {
    font-family: Fugaz One;
    font-size: 30px;
    color: #ffffff;
    text-align: center;
    letter-spacing: -1px;
    text-transform: uppercase;
}
/* ~IMAGES~
.img {
    -moz-box-shadow: 0 0 20px #0d0d0f;
    box-shadow: 0 0 20px #0d0d0f;
    }
*/

/* ~DIV-LAYER~ */
 #headsection-wrapper {
    width: 100%;
    height: 381px;
}
#headsection {
    background: #000000;
    width: 100%;
    height: 381px;
    color: #ffffff;
}
.headsection_container {
    width:100%;
}
#navigation_wrapper {
    width:100%;
    height:120px;
    z-index: 999;
    position: relative;
}
#navigation {
    height: 105px;
    width: 100%;
    color: #ffffff;
    background: #000000;
}
.navigation_container {
    width: 100%;
}
#main {
    background: #ffffff;
    width: 100%;
    margin: 0;
    float: top;
}
#content {
    background: #ffffff;
    width: 900px;
    height: 100%;
    min-height: 500px;
    margin: auto;
    text-align: center;
}
.content_container {
    padding: 20px;
}
#wp {
    width: 650px;
    margin-left: auto;
    margin-right: auto;
}
footer {
    background: #ffffff;
    color:...

JavaScript

$(function () {

    // grab the initial top offset of the navigation 
    var navigation_offset_top = $('#navigation').offset().top;

    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var navigation = function () {
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
        if (scroll_top > navigation_offset_top) {
            $('#navigation').css({
                'position': 'fixed',
                'top': 0,
                'left': 0
            });
        } else {
            $('#navigation').css({
                'position': 'relative'
            });
        }
    };

    // run our function on load
    navigation();

    // and run it again every time you scroll
    $(window).scroll(function () {
        navigation();
    });

    // NOT required:
    // for this demo disable all links that point to "#"
    $('a[href="#"]').click(function (event) {
        event.preventDefault();
    });

});