JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="content">
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content <br><br><br><br><br><br><br><br>
  Content...

CSS

#bannernormal {
  margin: auto;
  display: table;
  width: 200px;
  height: 400px;
  border: 1px solid #000;
  margin: 5px;
}

#bannerfixo {
  margin: 5px;
  width: 200px;
  height: 400px;
  border: 1px solid #000;
  margin: 5px;
}

#sidebar {
  float: left;
}

#content {
  float: right;
}

#footer {
  display: block;
  clear: both;
}

JavaScript

jQuery(document).ready(function($) {
	
  function isScrolledTo(elem) {
    var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top; //num of pixels above the elem
    var elemBottom = elemTop + $(elem).height();

    return ((elemTop <= docViewTop));
  }

  var catcher = $('#bannernormal');
  var sticky = $('#bannerfixo');

  if ($(window).width() >= 100) {				
    $(window).scroll(function() {
      if (isScrolledTo(sticky)) {
        sticky.css('position', 'fixed');
        sticky.css('top', '0px');
      } 
      var stopHeight = catcher.offset().top + catcher.height();
      if (stopHeight > sticky.offset().top) {
        sticky.css('position', 'absolute');
        sticky.css('top', stopHeight);
      }
    });
		
  } else {
    $(window).unbind('scroll');
  }
});