JSFiddle - React, Tailwind, and code Playground

by dmitri_aleksejev

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="row">
  <div class="col-xs-7">
    <p>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
            All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All the way with you<br>
      All...

CSS

#stay {
  background-color: gray;
  padding: 20px 40px 40px 40px;
}

JavaScript

$(document).ready(function() {
  (function($) {
      var element = $('#stay'),
          originalY = element.offset().top,
          stop = $("#stop"),
          end = stop.position().top;

      // Space between element and top of screen (when scrolling)
      var topMargin = 10;

      // Should probably be set in CSS; but here just for emphasis
      element.css('position', 'relative');

      $(window).on('scroll', function(event) {
          var scrollTop = $(window).scrollTop();
          element.stop(false, false).animate({
              top: scrollTop - originalY + topMargin + element.height() + parseInt(element.css("padding-bottom")) > end 
              				? element.css("top", end - $(element).height() - 60)
                      : scrollTop - originalY + topMargin
          }, 300);
      });
  })(jQuery);
});