JSFiddle - React, Tailwind, and code Playground
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;
// 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
? 0
: scrollTop - originalY + topMargin
}, 300);
});
})(jQuery);
});