initial
This commit is contained in:
@@ -0,0 +1,126 @@
|
||||
/* 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 = $('<div></div>').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);
|
||||
Reference in New Issue
Block a user