JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="outer">
<p>Paragraph</p>
<section id="yellow">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque repellendus eligendi, dolorem vel sapiente harum repellat voluptatum hic, officiis perspiciatis dolor labore maiores cumque eos necessitatibus non ex, fuga.</p>
  </section>
  <section id="top_casino_offer">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque repellendus eligendi, dolorem vel sapiente harum repellat voluptatum hic, officiis perspiciatis dolor labore maiores cumque eos necessitatibus non ex, fuga.</p>
  </section>
</div>

CSS

.outer{
  height: 1100px;
  background: green;
  width: 100%;
}
#yellow{background: yellow;
}
#top_casino_offer {
  top: 0;
}

JavaScript

$(window).scroll(function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 90;             
	// set to whatever you want it to be

    if(y_scroll_pos > scroll_pos_test) {
	   $("#top_casino_offer").css("position","fixed");
    }
	else
	{
		$("#top_casino_offer").css("position","relative");
	}
});