JSFiddle - React, Tailwind, and code Playground

HTML

<div id="A">
&nbsp;
</div>
<div id="mainnav">
    This is main navigation
</div>    
<div id="B">
&nbsp;
</div>

<div id="C">
    <div id="search">
        Search here
    </div>
</div>

<div id="D">
    &nbsp;
</div>

CSS

#A {
    position: relative;
    width: 100%;
    height: 100px;
    background-color: green;
}

#B {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: red;
}

#mainnav {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: blue;
    color: #fff;
    font-family:Helvetica, sans;
    font-size:20px;
    text-transform:uppercase;
}

#mainnav.floating {
    position: fixed;
    top:0;
    z-index:1000;
}

#C {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: orange;
}

#search {
    position:absolute;
    width:150px;
    height:30px;
    bottom:5px;
    right:15px;
    background:olive;
    color: #fff;
    font-family:Helvetica, sans;
    font-size:16px;
    text-transform:uppercase;    
}

#search.floating {
    position:fixed;
    z-index:1001;
}

#D {
    height:600px;
    width:100%;
    position:relative;
    background:#666;
}

JavaScript

// Stick floating divs
var y ;
var menu_st=$('#mainnav').offset().top;
var search ;
    
$(document).scroll(function() {
    var y = $(this).scrollTop();
    var menu = $('#mainnav').offset().top;    
    var search = $('#search').offset().top;
    var nav = $('#mainnav').css('height');
    
    if (y >= menu_st) {
        $('#mainnav').addClass('floating');
    } else {
        $('#mainnav').removeClass('floating');
    }
    if (menu > search) {
        $('#search').addClass('floating').css({'top': nav});
    } else {
        $('#search').removeClass('floating').css({'top': ''});
    }
});