JSFiddle - React, Tailwind, and code Playground

by Jomar Domingos

HTML

<script src="https://rawgit.com/leafo/sticky-kit/v1.0.4/jquery.sticky-kit.min.js"></script>
<div id="div_conteudo">
    <p>
        Lorem Ipsum
    </p>
    <p>
        Lorem Ipsum
    </p>
    <p>
        Lorem Ipsum
    </p>
    <div id="sidebar" >
        Conteúdo fixo!
    </div>
</div>
<div id="div_rodape">
    Outra parte qualquer (tipo rodapé!) 
</div>

CSS

#div_conteudo
{
    width: 100%; 
    min-height: 500px; 
    background: #F0F0F0;
}

#div_rodape
{
    width: 100%; 
    min-height: 200px; 
    background: #333;
    color: #FFF;
    text-align: center;
}

#sidebar
{
    width: 30%; 
    height: 40px; 
    border: 1px solid #09c;
}

JavaScript

$("#sidebar").stick_in_parent()