JSFiddle - React, Tailwind, and code Playground

HTML

<div class='topContent'>Top Content</div>
<nav>
    <div class='googleSlide'></div>
    <div class='navContent'>Nav bar content</div>
</nav>
<div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
</div>

CSS

html, body { margin:0px; }
.topContent {
    height:75px; /* Arbitrary but necessary value */
    
    /* Semantics for the demo */
    line-height:75px;
    background:white;
    font-size:25px;
    padding-left:10px;
}
nav {
    height:44px; 
    width:100%;
    
    /* Semantics for the demo */
    background:grey;
    line-height:44px;
    font-size:18px;
    transition: all 0.200s;
}
nav div {
    float:left;
}
.googleSlide {
    background-image: url(//ssl.gstatic.com/s2/oz/images/sprites/ribbon-nav-1x-69dd561f4c55d6702aadda4e3b4ce787.png);
    background-position:0 -100px;
    height: 44px;
    width: 44px;
    margin-left:-55px;
    transition: all 0.200s;
}
.navContent {
    padding-left:10px;
}

JavaScript

window.onscroll = function() {
    var navigation = document.getElementsByTagName('nav')[0],
        slide = document.getElementsByClassName('googleSlide')[0];
    if(document.body.scrollTop > 75  && navigation.style.background != 'white') {
        navigation.style.background = 'white';
        navigation.style.border = '1px solid black';
        navigation.style.position = 'fixed';
        slide.style.marginLeft = '0px';
    }
    if(document.body.scrollTop < 75 && navigation.style.background != 'grey') {
        navigation.style.background = 'grey';
        navigation.style.border = 'none';
        slide.style.marginLeft = '-55px';
        navigation.style.position = 'static';
        navigation.style.top = '0px';
    }
}