JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

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(){

	var jElement = $('.element');

	$(window).scroll(function(){
		if ( $(this).scrollTop() > 650 ){
			jElement.css({
				'position':'fixed',
				'top':'10px'
			});
		}else{
			jElement.css({
				'position':'relative',
				'top':'auto'
			});
		}
	});

});