JSFiddle - React, Tailwind, and code Playground

HTML

<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="element">Conteúdo</div>

CSS

body {
    height: 5000px;
    font: 13px verdana, sans-serif;
}
div {
    margin: 10px;
}
.other {
    width: 200px;
    padding: 3em;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-top: #4898c6 3px solid;
    text-align: center;
}
.element {
    width: 200px;
    padding: 3em;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-top: #dc0000 3px solid;
    text-align: center;
}

JavaScript

$(function () {
       //incluso essa variavel para setar atributos do css depois
       var elemento = $('.element');

       $(window).scroll(function () {
           //distancia que o scroll devera rolar para aparecer o box da div
           if ($(this).scrollTop() > 300) {
               //bloco incluso para setar o css
               elemento.css({
                   'position': 'fixed',
                       'bottom': '15%'
               });

               $('.element').fadeIn();
           } else {
               $('.element').fadeOut();
           }
       });
   });