JSFiddle - React, Tailwind, and code Playground

HTML

<div class="other">Outros conteúdos</div>
<div class="element">Conteúdo</div>
<div class="bar2">Menu 1 | Menu 2 | Menu 3</div>

CSS

body{
  height: 1000px;
  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;
}
.bar2{
  width: 100%;
  padding: 1em;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-top: #dc0000 3px solid;
  text-align: center;
  display:none;
  top:100px;
  position:fixed;
}

JavaScript

$(function(){

	var jElement = $('.element');
  var div2 = $('.other');

	$(window).scroll(function(){
		if ( $(this).scrollTop() > 50 ){
			jElement.css({
				'position':'fixed',
				'top':'0px'
			});
      $('.other').fadeOut();
      $('.bar2').show();
      //$('.bar2').fadeIn();
      
		}else{
			jElement.css({
				'position':'relative',
				'top':'auto'
			});
      $('.other').fadeIn();
      $('.bar2').hide();
      //$('.bar2').fadeOut();
		}
	});

});