/* jSticky Plugin * ============= * Author: Andrew Henderson (@AndrewHenderson) * Contributor: Mike Street (@mikestreety) * Date: 9/7/2012 * Update: 09/20/2016 * Website: http://github.com/andrewhenderson/jsticky/ * Description: A jQuery plugin that keeps select DOM * element(s) in view while scrolling the page. */ ;(function($) { $.fn.jetStickySection = function(options) { var defaults = { topSpacing: 0, // No spacing by default zIndex: '', // No default z-index stopper: $('.sticky-stopper'), // Default stopper class, also accepts number value stickyClass: false // Class applied to element when it's stuck }; var settings = $.extend({}, defaults, options); // Accepts custom stopper id or class // Checks if custom z-index was defined function checkIndex() { if (typeof settings.zIndex == 'number') { return true; } else { return false; } } var hasIndex = checkIndex(); // True or false // Checks if a stopper exists in the DOM or number defined function checkStopper() { if (0 < settings.stopper.length || typeof settings.stopper === 'number') { return true; } else { return false; } } var hasStopper = checkStopper(); // True or false return this.each(function() { var $this = $(this); var topSpacing = settings.topSpacing; var thisHeight = $this.outerHeight(); var thisWidth = $this.outerWidth(); var zIndex = settings.zIndex; var pushPoint = $this.offset().top - topSpacing; // Point at which the sticky element starts pushing var placeholder = $('
').width(thisWidth ).height(thisHeight).addClass('sticky-placeholder'); // Cache a clone sticky element var stopper = settings.stopper; var $window = $(window); var detached = false; var stick = false; function stickyScroll() { if (detached) { return; } var thisHeight = $this.outerHeight(); var windowTop = $window.scrollTop(); // Check window's scroll position var stopPoint = stopper; var parentWidth = $this.parent().width(); placeholder.width(parentWidth); if ( hasStopper && typeof settings.stopper !== 'number' ) { var stopperTop = stopper.offset().top; stopPoint = (stopperTop - thisHeight) - topSpacing; } if (pushPoint < windowTop) { // Create a placeholder for sticky element to occupy vertical real estate if(settings.stickyClass) $this.addClass(settings.stickyClass); $this.after(placeholder ).css({ position: 'fixed', top: topSpacing, width: parentWidth }); if (hasIndex) { $this.css({ zIndex: zIndex }); } if (hasStopper) { if (stopPoint < windowTop) { var diff = (stopPoint - windowTop) + topSpacing; $this.css({ top: diff }); } } if ( ! stick ) { $this.trigger( 'jetStickySection:stick' ); } stick = true; } else { if(settings.stickyClass) $this.removeClass(settings.stickyClass); $this.css({ position: '', top: '', left: '', width: '' }); placeholder.remove(); if ( stick ) { $this.trigger( 'jetStickySection:unstick' ); } stick = false; } } function detachStickyScroll() { detached = true; //$window.off('load', stickyScroll); $window.off('scroll', stickyScroll); $window.off('touchmove', stickyScroll); $window.off('resize', stickyScroll); if(settings.stickyClass) $this.removeClass(settings.stickyClass); $this.css({ position: '', top: '', left: '', width: '' }); placeholder.remove(); } if($window.innerHeight() > thisHeight) { //$window.on('load', stickyScroll); $this.on( 'jetStickySection:activated', stickyScroll ); $window.on('scroll', stickyScroll); $window.on('touchmove', stickyScroll); $window.on('resize', stickyScroll); $this.on( 'jetStickySection:detach', detachStickyScroll ); } }); }; })(jQuery);