How to Make Sticky Sidebar Using jQuery and CSS

Sticky sidebar is an essential part of web development. Not in all cases but for some cases where our page has more content in one side and so we need to fix the other side on scroll of the page.

Javascript css sticky sidebar is the important part of web development

The Jquery part:

<script>
$(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 = $('#catcher');
var sticky = $('#sticky');

$(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);
}
});
});
</script>


<div id="content">