stickyBar.css

.bar {
	position: relative;
}
.sticky-bar .bar {
	position: fixed;
	left: 0; // or whatever makes it fit
	right: 0; // or whatever makes it fit
}

stickyBar.js

var stickyBar = function(bar, pane) {
	var $body = $('body'),
		$bar = $(bar),
		$pane = $(pane),
		barHeight = $bar.outerHeight(true),
		$barParent = $bar.parent(),
		offset = $bar.offset().top - $pane.offset().top + barHeight;

	$pane.on('scroll', function() {
		var distance = $pane.scrollTop();
		$body.toggleClass('sticky-bar', (distance > offset));
		if($body.hasClass('sticky-bar')) {
			$bar.css({top: Math.floor($pane.offset().top)});
			$barParent.css({paddingTop: barHeight});
		} else {
			$bar.css({top: 0});
			$barParent.css({paddingTop: 0});
		}
	});
};

StickyBar.md

Sticky Bar

Make an element sticky once it has scrolled out of view in a scrollable <div>