JSFiddle - React, Tailwind, and code Playground

by Diego Vieira

HTML

<div id="video">
    Video Maroto Aqui!
</div>

<div id="menu">Menu</div>

<div id="conteudo">
    <h1>Oi ju</h1>
    <h1>Xau Ju</h1>
     <h1>Oi ju</h1>
    <h1>Xau Ju</h1>
     <h1>Oi ju</h1>
    <h1>Xau Ju</h1>
     <h1>Oi ju</h1>
    <h1>Xau Ju</h1>
     <h1>Oi ju</h1>
    <h1>Xau Ju</h1>
     <h1>Oi ju</h1>
    <h1>Xau Ju</h1>
     <h1>Oi ju</h1>
    <h1>Xau Ju</h1>
</div>

CSS

body {
    padding:0;
    margin:0;
}

#video {
    width:100%;
    background:#000;
    font-size:80px;
    color:#fff;
}

#menu {
    width:100%;
    background:#ff2000;
    color:#fff;
    height:100px;
}

JavaScript

$(function(){
    $('#video').css('height', window.innerHeight - 100);
    
    var $sidebar   = $("#menu"), 
        $window    = $(window),
        offset     = $sidebar.offset()

    $window.scroll(function() {
        if ($window.scrollTop() > window.innerHeight - 100) {
            $sidebar.css({
                position: 'fixed',
                top: 0
            });
        } else {
            $sidebar.css({
                position: 'relative'
            });
        }
    });
    
});