JSFiddle - React, Tailwind, and code Playground

HTML

<div id="headertwo">
    <div id="intro">
    </div>
</div>

<div id="header_stick">

    <div class="nav-container">

        <div class="nav-logo feature">

            <a href="index.html#anchor" class="transition">
            </a>
            <div class="nav-logo-img"><img src="http://placehold.it/50">
            </div>
            <div class="nav-logo-text">
            </div>
        </div>

        <div class="nav-menu">
            <div class="nav-link contact"><a href="contact.html" class="transition">Contact</a>
            </div>
            <div class="nav-link about"><a href="about.html" class="active transition">About</a>
            </div>
            <div class="nav-link work"><a href="index.html#anchor" class="transition">Work</a>
            </div>
            <button id="trigger-overlay" type="button">Menu</button>
        </div>
    </div>
</div>
    <div class="overlay overlay-hugeinc">
        <button type="button" class="overlay-close">Close</button>
        <nav>
            <ul>
                <li><a href="index.html#anchor">Work</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>


<div class="width-container">
    <div class="line">
    </div>

    <div class="project contact-padding">
        <div class="column-one">
            <div class="header-container">
                <div class="header">About
                </div>
                <div class="subtitle">Subtitle
                </div>
            </div>

        </div>
        <div class="column-two">

                <div class="about-body-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fringilla sapien, eget feugiat justo. Aenean gravida libero ac dolor sagittis, in eleifend tortor lacinia. Quisque at lectus in ex imperdiet convallis. Morbi leo nisi, suscipit eu semper non, mattixs non velit. Duis commodo sem nibh, vitae pharetra purus...

CSS

#header {
    width: 100%; 
    height:100%;
}

.headertwo {
    width: 100%; 
    height: 48px !important;
    background: url("http://placehold.it/50") no-repeat;
    background-size: 100%;
}

#header_stick {
    width: 100%;
    height: 80px;
    margin-top: 16px;
    font-size: 16px;
    background-color: white;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease;
}

#header_stick img {
    margin-top: 1px;
    width: 120px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease;
}

.stick {
    position:fixed;
    top:0;
    height: 51px;
    margin-top: 0px;
    font-size: 14px;
    background-color: white;
    opacity:0.9;
    z-index: 14;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease;
}

.stick img {

    width: 100px;
    margin-top: 1px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease;
}

JavaScript

$(function() {
 jQuery(window).scroll(function(){
    var top = jQuery(window).scrollTop();
     if(top>42) { // height of float header
jQuery('#header_stick').addClass('stick');
     jQuery('.width-container').css("paddingTop", "80px");
     }
     else {
 jQuery('#header_stick').removeClass('stick');
     jQuery('.width-container').css("paddingTop", "0px");
     }
    });
});