steveosoule
10/18/2014 - 12:01 AM

Affix

Affix

(function($) {
	$.fn.affix = function(affixClass) {
		var element = this,
			elementHeight = this.height(),
			elementTop = this.position().top,
			$window = $(window);
		affixClass = affixClass || 'affix';
		$window.scroll(function() {
			var wintop = $window.scrollTop(),
				docheight = $(document).height(),
				winheight = $window.height();
			if (wintop > (elementHeight + elementTop)) {
				if (!element.hasClass(affixClass)) {
					element.addClass(affixClass);
					element.next().css('margin-top', elementHeight);
				}
			} else if (element.hasClass(affixClass) && wintop <= elementHeight) {
				element.next().css('margin-top', 0);
				element.removeClass(affixClass);
			}
		});
		return this;
	};
})(jQuery);

$('.form-menu').affix();
<div class="form-menu"><span class="addAll button">Add Selected to Cart</span></div>
.form-menu.affix {
    background: #fff;
    width: 100%;
    position: fixed;
    top:0;
    left: 0;
    padding: 10px;
    text-align: center;
    box-shadow: 5px 5px 5px rgba(0,0,0, .2)
}