JSFiddle - React, Tailwind, and code Playground

by luizpaulo165

HTML

<div id="banner"></div>

<nav id="menu">
    <a href="#">Links</a>
    <a href="#">Links</a>
    <a href="#">Links</a>
    <a href="#">Links</a>
</nav>

<div class="divis"></div>
<div class="divis"></div>
<div class="divis"></div>
<div class="divis"></div>

CSS

#banner{
    background:#2C82C9;
    width:100%;
    height:300px;
}
.divis{
    background:#FCB941;
    width:100%;
    height:300px;
}
.divis:nth-child(2n+1){
    background:#FC6042;
}

#menu{
    text-align:center;
    background:#2CC990;
    width:100%;
    transition:all 0.2s;
    -webkit-transition:all 0.2s;
}
#menu.fixed{
    background:#fff;
    position:fixed;
    top:0;
    left:0;
}
#menu a{
    font-family:Verdana;
    font-size:16px;
    color:#fff;
    display:inline-block;
    padding:5px 10px;
    position:relative;
}
#menu.fixed a{
    color:#2CC990;
}

JavaScript

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() >= $('#banner').outerHeight()) {
            $('#menu').addClass('fixed');
        }else {
            $('#menu').removeClass('fixed');
        }
    });
});