JSFiddle - React, Tailwind, and code Playground

HTML

<div class='slide'>    
    <div id='some-block'></div>
    <nav class='navbar'>
        <input type="button" id="diet" value="Стол" onclick="changeDiet()"/>
    </nav>  
</div>
<div class='slide'></div>
<div class='slide'></div>

CSS

html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.slide{
    width:100%;
    height:100%;
}
.slide:nth-child(odd){
    background-color:#5fa9dd;
}
.slide:nth-child(even){
    background-color:#9fdc56;
}
.navbar{
    background:#333;
    color:#fff;
    height:50px;
    line-height:50px;
    width:100%;
    left:0;
    top:0;
}
.menu{
    list-style:none;
    padding:0;
    margin:0;
}
.menu li{
    display:inline-block;
    padding:0 15px;
}
.menu li:hover{
    cursor:pointer;
    background:#141414;
}
#some-block{
    width:100%;
    background:#f95c12;
    height:calc(100% - 50px);
}
#some-block h1{
    margin:0;
    padding:0;
    text-align:center;
}

JavaScript

window.onscroll = function(){
    var some_block = document.getElementById('some-block');
    var nav = document.querySelector('#some-block + .navbar');
    if(window.pageYOffset > some_block.clientHeight)
        nav.style.position = 'fixed';
    else
        nav.style.position = '';
}