I have a simple bootstrap row containing two columns:
<div class="row">
<div class="col-xs-7">
<p>Walking together</p>
</div>
<div class="col-xs-5" id="stay">
<p>Joyful journey</p>
</div>
</div>
<div id="stop">
<p>AVOID THIS AREA.</p>
</div>
With the following script, the column with id #stay will stick with the first column as you scroll down:
$(document).ready(function() {
(function($) {
var element = $('#stay'),
originalY = element.offset().top;
// Distance between element and top of screen while scrolling
var topMargin = 10;
// Ideally set in CSS, but added here for clarity
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);
});
Check out this example: https://jsfiddle.net/16vqvqev/7/. I want to figure out how to make the column stop sticking once it reaches the div with id #stop.
- Any suggestions on achieving this with the current js?
- I attempted using affix from Bootstrap but didn't succeed. Any ideas on how to implement that instead?
UPDATE: There is preceding content on my website before the row with the sticky column, so the code now looks like this: https://jsfiddle.net/16vqvqev/11/