semi-fixed-semi-scrolling (sidebar)

functions.js

jQuery(function ($) {
	var $win = $(window);
	var $scrollPanel = $('#scrollPanel');
	var windowTop = 0;
	var lastDelta = 0;
	var fixed = false;
	
	$win.scroll(function (e) {
		var newTop = $win.scrollTop();
		var delta = newTop - windowTop;
		
		if (!fixed) {
			if (delta > 0) {
				scrollPanelBottom = parseInt($scrollPanel.css('top')) + $scrollPanel.outerHeight(true);
				visibleBottom = newTop + $win.height();
				
				if (visibleBottom > scrollPanelBottom) {
					$scrollPanel.css({ position: 'fixed', top: 'auto', bottom: 0 });
					fixed = true;
				}
			} else {
				if ($scrollPanel.position().top - windowTop > 10) {
					$scrollPanel.css({ position: 'fixed', top: '0px', bottom: 'auto' });
					fixed = true;
				}
			}
		} else {
			if ( (delta > 0 && lastDelta < 0) || (delta < 0 && lastDelta > 0) ) {
				$scrollPanel.css({ position: 'absolute', top: $scrollPanel.offset().top + 'px', bottom: 'auto' });
				fixed = false;
			}
		}
		
		lastDelta = delta > 0 ? 1 : -1;
		windowTop = newTop;
	});
});

style.css

#scrollPanel {
	position: absolute;
	top: 0px;
	height: auto;
}

Slightly modernized demo: https://codepen.io/georgehtmlburger/pen/qBqqNrq