/* 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. */ // Modifications to compensate for WordPress admin bar height, wp-admin .wrap class top margin and plugin page's margin top is done by Bowo (https://bowo.io) (function($) { $.fn.sticky = 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 adminBarHeight = 32; // height of WP admin bar // var adminBarOffset = 8; var adminBarOffset = 0; var adminWrapOffset = 0; // margin-top of wp-admin .wrap // var headerMarginTop = 24; var headerMarginTop = 0; var thisHeight = $this.outerHeight(); var thisWidth = $this.outerWidth(); var topSpacing = settings.topSpacing; var zIndex = settings.zIndex; var pushPoint = $this.offset().top - topSpacing - adminBarHeight; // Point at which the sticky element starts pushing var placeholder = $('

').width(thisWidth).height(thisHeight).css('margin-top',headerMarginTop+'px').addClass('sticky-placeholder'); // Cache a clone sticky element var stopper = settings.stopper; var $window = $(window); function stickyScroll() { var windowTop = $window.scrollTop(); // Check window's scroll position var stopPoint = stopper; var parentWidth = $this.parent().width(); placeholder.width(parentWidth) if ( hasStopper && typeof stopper === 'string' ) { var stopperTop = $(stopper).offset().top; stopPoint = (stopperTop - thisHeight) - topSpacing; } // console.log( 'thisHeight: ' + thisHeight + ' | thisWidth: ' + thisWidth + ' | pushPoint: ' + pushPoint + ' | windowTop: ' + windowTop + ' | stopPoint: ' + stopPoint ); if (pushPoint < windowTop) { // Create a placeholder for sticky element to occupy vertical real estate if(settings.stickyClass) $this.addClass(settings.stickyClass,0); $this.after(placeholder).css({ position: 'fixed', top: topSpacing + adminBarOffset, width: parentWidth }); if (hasIndex) { $this.css({ zIndex: zIndex }); } if (hasStopper) { if (stopPoint < windowTop) { var diff = (stopPoint - windowTop) + topSpacing + adminBarOffset; $this.css({ top: diff }); } } } else { if(settings.stickyClass) $this.removeClass(settings.stickyClass); $this.css({ position: 'static', top: null, left: null, width: 'auto' }); placeholder.remove(); } } if($window.innerHeight() > thisHeight) { $window.bind('scroll', stickyScroll); $window.bind('load', stickyScroll); $window.bind('resize', stickyScroll); } }); }; })(jQuery);