Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More β†’
Socket
Sign inDemoInstall
Socket

stickybits

Package Overview
Dependencies
Maintainers
1
Versions
85
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

stickybits - npm Package Compare versions

Comparing version 2.1.2 to 3.0.0

dist/umbrella.stickybits.js

13

dist/jquery.stickybits.min.js
/**
* stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
* @version v2.1.2
* @link https://github.com/dollarshaveclub/stickybits#readme
* @author Jeff Wainwright <jjwainwright2@gmail.com> (https://jeffry.in)
* @license MIT */
!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s():"function"==typeof define&&define.amd?define(s):s()}(0,function(){"use strict";function t(t,s){var e=void 0!==s?s:{};this.version="2.1.2",this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={noStyles:e.noStyles||!1,stickyBitStickyOffset:e.stickyBitStickyOffset||0,parentClass:e.parentClass||"js-stickybit-parent",scrollEl:e.scrollEl||window,stickyClass:e.stickyClass||"js-is-sticky",stuckClass:e.stuckClass||"js-is-stuck",useStickyClasses:e.useStickyClasses||!1,verticalPosition:e.verticalPosition||"top"};var i=this.props;i.positionVal=this.definePosition()||"fixed";var o=i.verticalPosition,n=i.noStyles,r=i.positionVal;this.els="string"==typeof t?document.querySelectorAll(t):t,"length"in this.els||(this.els=[this.els]),this.instances=[];for(var a=0;a<this.els.length;a+=1){var l=this.els[a],c=l.style;if("top"!==o||n||(c[o]=i.stickyBitStickyOffset+"px"),"fixed"!==r&&!1===i.useStickyClasses)c.position=r;else{"fixed"!==r&&(c.position=r);var p=this.addInstance(l,i);this.instances.push(p)}}return this}function s(s,e){return new t(s,e)}if(t.prototype.definePosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=document.head.style,e=0;e<t.length;e+=1)s.position=t[e]+"sticky";var i="fixed";return void 0!==s.position&&(i=s.position),s.position="",i},t.prototype.addInstance=function(t,s){var e=this,i={el:t,parent:t.parentNode,props:s},o=i.props;i.parent.className+=" "+s.parentClass;var n=o.scrollEl;return i.isWin=n===window,i.isWin||(n=this.getClosestParent(i.el,n)),this.computeScrollOffsets(i),i.state="default",i.stateContainer=function(){e.manageState(i)},n.addEventListener("scroll",i.stateContainer),i},t.prototype.getClosestParent=function(t,s){var e=document.querySelector(s),i=t;if(i.parentElement===e)return e;for(;i.parentElement!==e;)i=i.parentElement;return e},t.prototype.computeScrollOffsets=function(t){var s=t,e=s.props,i=s.parent,o=s.isWin,n=0,r=i.getBoundingClientRect().top;return o||"fixed"!==e.positionVal||(n=e.scrollEl.getBoundingClientRect().top,r=i.getBoundingClientRect().top-n),s.offset=n+e.stickyBitStickyOffset,"bottom"!==e.verticalPosition?(s.stickyStart=r-s.offset,s.stickyStop=r+i.offsetHeight-(s.el.offsetHeight+s.offset)):(s.stickyStart=0,s.stickyStop=r+i.offsetHeight),s},t.prototype.toggleClasses=function(t,s,e){var i=t,o=i.className.split(" ");e&&-1===o.indexOf(e)&&o.push(e);var n=o.indexOf(s);-1!==n&&o.splice(n,1),i.className=o.join(" ")},t.prototype.manageState=function(t){var s=t,e=s.el,i=s.props,o=s.state,n=s.stickyStart,r=s.stickyStop,a=e.style,l=i.noStyles,c=i.positionVal,p=i.scrollEl,f=i.stickyClass,u=i.stuckClass,y=i.verticalPosition,d=p.requestAnimationFrame;s.isWin&&void 0!==d||(d=function(t){t()});var k=this.toggleClasses,h=s.isWin?p.scrollY||p.pageYOffset:p.scrollTop,v=h>n&&h<r&&("default"===o||"stuck"===o),g=h<=n&&"sticky"===o,m=h>=r&&"sticky"===o;return v?(s.state="sticky",d(function(){k(e,u,f),a.position=c,l||(a.bottom="",a[y]=i.stickyBitStickyOffset+"px")})):g?(s.state="default",d(function(){k(e,f),"fixed"===c&&(a.position="")})):m&&(s.state="stuck",d(function(){k(e,f,u),"fixed"!==c||l||(a.top="",a.bottom="0",a.position="absolute")})),s},t.prototype.removeInstance=function(t){var s=t.el,e=t.props,i=this.toggleClasses;s.style.position="",s.style[e.verticalPosition]="",i(s,e.stickyClass),i(s,e.stuckClass),i(s.parentNode,e.parentClass)},t.prototype.cleanup=function(){for(var t=0;t<this.instances.length;t+=1){var s=this.instances[t];s.props.scrollEl.removeEventListener("scroll",s.stateContainer),this.removeInstance(s)}this.manageState=!1,this.instances=[]},"undefined"!=typeof window){var e=window.$||window.jQuery||window.Zepto;e&&(e.fn.stickybits=function(t){s(this,t)})}});
stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
@version v3.0.0
@link https://github.com/dollarshaveclub/stickybits#readme
@author Jeff Wainwright <yowainwright@gmail.com> (https://jeffry.in)
@license MIT
**/
!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s():"function"==typeof define&&define.amd?define(s):s()}(0,function(){"use strict";function t(t,s){var e=void 0!==s?s:{};this.version='"3.0.0"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={noStyles:e.noStyles||!1,stickyBitStickyOffset:e.stickyBitStickyOffset||0,parentClass:e.parentClass||"js-stickybit-parent",scrollEl:e.scrollEl||window,stickyClass:e.stickyClass||"js-is-sticky",stuckClass:e.stuckClass||"js-is-stuck",useStickyClasses:e.useStickyClasses||!1,verticalPosition:e.verticalPosition||"top"};var i=this.props;i.positionVal=this.definePosition()||"fixed";var o=i.verticalPosition,n=i.noStyles,r=i.positionVal;this.els="string"==typeof t?document.querySelectorAll(t):t,"length"in this.els||(this.els=[this.els]),this.instances=[];for(var a=0;a<this.els.length;a+=1){var l=this.els[a],c=l.style;if(c[o]="top"!==o||n?"":i.stickyBitStickyOffset+"px",c.position=r,"fixed"===r||i.useStickyClasses){var p=this.addInstance(l,i);this.instances.push(p)}}return this}if(t.prototype.definePosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=document.head.style,e=0;e<t.length;e+=1)s.position=t[e]+"sticky";var i=s.position?s.position:"fixed";return s.position="",i},t.prototype.addInstance=function(t,s){var e=this,i={el:t,parent:t.parentNode,props:s};this.isWin=this.props.scrollEl===window;var o=this.isWin?window:this.getClosestParent(i.el,i.props.scrollEl);return this.computeScrollOffsets(i),i.parent.className+=" "+s.parentClass,i.state="default",i.stateContainer=function(){return e.manageState(i)},o.addEventListener("scroll",i.stateContainer),i},t.prototype.getClosestParent=function(t,s){var e=document.querySelector(s),i=t;if(i.parentElement===e)return e;for(;i.parentElement!==e;)i=i.parentElement;return e},t.prototype.computeScrollOffsets=function(t){var s=t,e=s.props,i=s.parent,o=!this.isWin&&"fixed"===e.positionVal,n="bottom"!==e.verticalPosition,r=o?e.scrollEl.getBoundingClientRect().top:0,a=o?i.getBoundingClientRect().top-r:i.getBoundingClientRect().top;return s.offset=r+e.stickyBitStickyOffset,s.stickyStart=n?a-s.offset:0,s.stickyStop=n?a+i.offsetHeight-(s.el.offsetHeight+s.offset):a+i.offsetHeight,s},t.prototype.toggleClasses=function(t,s,e){var i=t,o=i.className.split(" ");e&&-1===o.indexOf(e)&&o.push(e);var n=o.indexOf(s);-1!==n&&o.splice(n,1),i.className=o.join(" ")},t.prototype.manageState=function(t){var s=t,e=s.el,i=s.props,o=s.state,n=s.stickyStart,r=s.stickyStop,a=e.style,l=i.noStyles,c=i.positionVal,p=i.scrollEl,f=i.stickyClass,u=i.stuckClass,d=i.verticalPosition,y=function(t){t()},h=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||y,k=this.toggleClasses,m=this.isWin||document.querySelector(p).getBoundingClientRect().top?window.scrollY||window.pageYOffset:document.querySelector(p).scrollTop,v=m<=n&&"sticky"===o,g=m>=r&&"sticky"===o;return m>n&&m<r&&("default"===o||"stuck"===o)?(s.state="sticky",h(function(){k(e,u,f),a.position=c,l||(a.bottom="",a[d]=i.stickyBitStickyOffset+"px")})):v?(s.state="default",h(function(){k(e,f),"fixed"===c&&(a.position="")})):g&&(s.state="stuck",h(function(){k(e,f,u),"fixed"!==c||l||(a.top="",a.bottom="0",a.position="absolute")})),s},t.prototype.removeInstance=function(t){var s=t.el,e=t.props,i=this.toggleClasses;s.style.position="",s.style[e.verticalPosition]="",i(s,e.stickyClass),i(s,e.stuckClass),i(s.parentNode,e.parentClass)},t.prototype.cleanup=function(){for(var t=0;t<this.instances.length;t+=1){var s=this.instances[t];s.props.scrollEl.removeEventListener("scroll",s.stateContainer),this.removeInstance(s)}this.manageState=!1,this.instances=[]},"undefined"!=typeof window){var s=window.$||window.jQuery||window.Zepto;s&&(s.fn.stickybits=function(s){new t(this,s)})}});

@@ -1,356 +0,8 @@

/*
STICKYBITS πŸ’‰
--------
> a lightweight alternative to `position: sticky` polyfills 🍬
--------
- each method is documented above it our view the readme
- Stickybits does not manage polymorphic functionality (position like properties)
* polymorphic functionality: (in the context of describing Stickybits)
means making things like `position: sticky` be loosely supported with position fixed.
It also means that features like `useStickyClasses` takes on styles like `position: fixed`.
--------
defaults πŸ”Œ
--------
- version = `package.json` version
- userAgent = viewer browser agent
- target = DOM element selector
- noStyles = boolean
- offset = number
- parentClass = 'string'
- scrollEl = window || DOM element selector
- stickyClass = 'string'
- stuckClass = 'string'
- useStickyClasses = boolean
- verticalPosition = 'string'
--------
propsπŸ”Œ
--------
- p = props {object}
--------
instance note
--------
- stickybits parent methods return this
- stickybits instance methods return an instance item
--------
nomenclature
--------
- target => el => e
- props => o || p
- instance => item => it
--------
methods
--------
- .definePosition = defines sticky or fixed
- .addInstance = an array of objects for each Stickybits Target
- .getClosestParent = gets the parent for non-window scroll
- .computeScrollOffsets = computes scroll position
- .toggleClasses = older browser toggler
- .manageState = manages sticky state
- .removeClass = older browser support class remover
- .removeInstance = removes an instance
- .cleanup = removes all Stickybits instances and cleans up dom from stickybits
*/
function Stickybits(target, obj) {
var o = typeof obj !== 'undefined' ? obj : {};
this.version = '2.1.2';
this.userAgent = window.navigator.userAgent || 'no `userAgent` provided by the browser';
this.props = {
noStyles: o.noStyles || false,
stickyBitStickyOffset: o.stickyBitStickyOffset || 0,
parentClass: o.parentClass || 'js-stickybit-parent',
scrollEl: o.scrollEl || window,
stickyClass: o.stickyClass || 'js-is-sticky',
stuckClass: o.stuckClass || 'js-is-stuck',
useStickyClasses: o.useStickyClasses || false,
verticalPosition: o.verticalPosition || 'top'
};
var p = this.props;
/*
define positionVal
----
- uses a computed (`.definePosition()`)
- defined the position
*/
p.positionVal = this.definePosition() || 'fixed';
var vp = p.verticalPosition;
var ns = p.noStyles;
var pv = p.positionVal;
this.els = typeof target === 'string' ? document.querySelectorAll(target) : target;
if (!('length' in this.els)) this.els = [this.els];
this.instances = [];
for (var i = 0; i < this.els.length; i += 1) {
var el = this.els[i];
var styles = el.style;
if (vp === 'top' && !ns) styles[vp] = p.stickyBitStickyOffset + 'px';
if (pv !== 'fixed' && p.useStickyClasses === false) {
styles.position = pv;
} else {
// const stickyManager = new ManageSticky(el, p)
if (pv !== 'fixed') styles.position = pv;
var instance = this.addInstance(el, p);
// instances are an array of objects
this.instances.push(instance);
}
}
return this;
}
/*
setStickyPosition βœ”οΈ
--------
β€” most basic thing stickybits does
=> checks to see if position sticky is supported
=> defined the position to be used
=> stickybits works accordingly
*/
Stickybits.prototype.definePosition = function () {
var prefix = ['', '-o-', '-webkit-', '-moz-', '-ms-'];
var test = document.head.style;
for (var i = 0; i < prefix.length; i += 1) {
test.position = prefix[i] + 'sticky';
}
var stickyProp = 'fixed';
if (typeof test.position !== 'undefined') stickyProp = test.position;
test.position = '';
return stickyProp;
};
/*
addInstance βœ”οΈ
--------
β€” manages instances of items
- takes in an el and props
- returns an item object
---
- target = el
- o = {object} = props
- scrollEl = 'string'
- verticalPosition = number
- off = boolean
- parentClass = 'string'
- stickyClass = 'string'
- stuckClass = 'string'
---
- defined later
- parent = dom element
- state = 'string'
- offset = number
- stickyStart = number
- stickyStop = number
- returns an instance object
*/
Stickybits.prototype.addInstance = function addInstance(el, props) {
var _this = this;
var item = {
el: el,
parent: el.parentNode,
props: props
};
var p = item.props;
item.parent.className += ' ' + props.parentClass;
var se = p.scrollEl;
item.isWin = se === window;
if (!item.isWin) se = this.getClosestParent(item.el, se);
this.computeScrollOffsets(item);
item.state = 'default';
item.stateContainer = function () {
_this.manageState(item);
};
se.addEventListener('scroll', item.stateContainer);
return item;
};
/*
--------
getParent πŸ‘¨β€
--------
- a helper function that gets the target element's parent selected el
- only used for non `window` scroll elements
- supports older browsers
*/
Stickybits.prototype.getClosestParent = function getClosestParent(el, matchSelector) {
// p = parent element
var p = document.querySelector(matchSelector);
var e = el;
if (e.parentElement === p) return p;
// traverse up the dom tree until we get to the parent
while (e.parentElement !== p) {
e = e.parentElement;
} // return parent element
return p;
};
/*
computeScrollOffsets πŸ“Š
---
computeScrollOffsets for Stickybits
- defines
- offset
- start
- stop
*/
Stickybits.prototype.computeScrollOffsets = function computeScrollOffsets(item) {
var it = item;
var p = it.props;
var parent = it.parent;
var iw = it.isWin;
var scrollElOffset = 0;
var stickyStart = parent.getBoundingClientRect().top;
if (!iw && p.positionVal === 'fixed') {
scrollElOffset = p.scrollEl.getBoundingClientRect().top;
stickyStart = parent.getBoundingClientRect().top - scrollElOffset;
}
it.offset = scrollElOffset + p.stickyBitStickyOffset;
if (p.verticalPosition !== 'bottom') {
it.stickyStart = stickyStart - it.offset;
it.stickyStop = stickyStart + parent.offsetHeight - (it.el.offsetHeight + it.offset);
} else {
it.stickyStart = 0;
it.stickyStop = stickyStart + parent.offsetHeight;
}
return it;
};
/*
toggleClasses βš–οΈ
---
toggles classes (for older browser support)
r = removed class
a = added class
*/
Stickybits.prototype.toggleClasses = function toggleClasses(el, r, a) {
var e = el;
var cArray = e.className.split(' ');
if (a && cArray.indexOf(a) === -1) cArray.push(a);
var rItem = cArray.indexOf(r);
if (rItem !== -1) cArray.splice(rItem, 1);
e.className = cArray.join(' ');
};
/*
manageState πŸ“
---
- defines the state
- normal
- sticky
- stuck
*/
Stickybits.prototype.manageState = function manageState(item) {
// cache object
var it = item;
var e = it.el;
var p = it.props;
var state = it.state;
var start = it.stickyStart;
var stop = it.stickyStop;
var stl = e.style;
// cache props
var ns = p.noStyles;
var pv = p.positionVal;
var se = p.scrollEl;
var sticky = p.stickyClass;
var stuck = p.stuckClass;
var vp = p.verticalPosition;
/*
requestAnimationFrame
---
- use rAF
- or stub rAF
*/
var rAF = se.requestAnimationFrame;
if (!it.isWin || typeof rAF === 'undefined') {
rAF = function rAFDummy(f) {
f();
};
}
/*
define scroll vars
---
- scroll
- notSticky
- isSticky
- isStuck
*/
var tC = this.toggleClasses;
var scroll = it.isWin ? se.scrollY || se.pageYOffset : se.scrollTop;
var notSticky = scroll > start && scroll < stop && (state === 'default' || state === 'stuck');
var isSticky = scroll <= start && state === 'sticky';
var isStuck = scroll >= stop && state === 'sticky';
/*
Unnamed arrow functions within this block
---
- help wanted or discussion
- view test.stickybits.js
- `stickybits .manageState `position: fixed` interface` for more awareness πŸ‘€
*/
if (notSticky) {
it.state = 'sticky';
rAF(function () {
tC(e, stuck, sticky);
stl.position = pv;
if (ns) return;
stl.bottom = '';
stl[vp] = p.stickyBitStickyOffset + 'px';
});
} else if (isSticky) {
it.state = 'default';
rAF(function () {
tC(e, sticky);
if (pv === 'fixed') stl.position = '';
});
} else if (isStuck) {
it.state = 'stuck';
rAF(function () {
tC(e, sticky, stuck);
if (pv !== 'fixed' || ns) return;
stl.top = '';
stl.bottom = '0';
stl.position = 'absolute';
});
}
return it;
};
/*
removes an instance πŸ‘‹
--------
- cleanup instance
*/
Stickybits.prototype.removeInstance = function removeInstance(instance) {
var e = instance.el;
var p = instance.props;
var tC = this.toggleClasses;
e.style.position = '';
e.style[p.verticalPosition] = '';
tC(e, p.stickyClass);
tC(e, p.stuckClass);
tC(e.parentNode, p.parentClass);
};
/*
cleanup πŸ›
--------
- cleans up each instance
- clears instance
*/
Stickybits.prototype.cleanup = function cleanup() {
for (var i = 0; i < this.instances.length; i += 1) {
var instance = this.instances[i];
instance.props.scrollEl.removeEventListener('scroll', instance.stateContainer);
this.removeInstance(instance);
}
this.manageState = false;
this.instances = [];
};
/*
export
--------
exports StickBits to be used 🏁
*/
function stickybits(target, o) {
return new Stickybits(target, o);
}
export default stickybits;
/**
stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
@version v3.0.0
@link https://github.com/dollarshaveclub/stickybits#readme
@author Jeff Wainwright <yowainwright@gmail.com> (https://jeffry.in)
@license MIT
**/
function Stickybits(t,s){var i=void 0!==s?s:{};this.version='"3.0.0"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={noStyles:i.noStyles||!1,stickyBitStickyOffset:i.stickyBitStickyOffset||0,parentClass:i.parentClass||"js-stickybit-parent",scrollEl:i.scrollEl||window,stickyClass:i.stickyClass||"js-is-sticky",stuckClass:i.stuckClass||"js-is-stuck",useStickyClasses:i.useStickyClasses||!1,verticalPosition:i.verticalPosition||"top"};var e=this.props;e.positionVal=this.definePosition()||"fixed";var o=e.verticalPosition,n=e.noStyles,r=e.positionVal;this.els="string"==typeof t?document.querySelectorAll(t):t,"length"in this.els||(this.els=[this.els]),this.instances=[];for(var a=0;a<this.els.length;a+=1){var l=this.els[a],c=l.style;if(c[o]="top"!==o||n?"":e.stickyBitStickyOffset+"px",c.position=r,"fixed"===r||e.useStickyClasses){var p=this.addInstance(l,e);this.instances.push(p)}}return this}function stickybits(t,s){return new Stickybits(t,s)}Stickybits.prototype.definePosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=document.head.style,i=0;i<t.length;i+=1)s.position=t[i]+"sticky";var e=s.position?s.position:"fixed";return s.position="",e},Stickybits.prototype.addInstance=function(t,s){var i=this,e={el:t,parent:t.parentNode,props:s};this.isWin=this.props.scrollEl===window;var o=this.isWin?window:this.getClosestParent(e.el,e.props.scrollEl);return this.computeScrollOffsets(e),e.parent.className+=" "+s.parentClass,e.state="default",e.stateContainer=function(){return i.manageState(e)},o.addEventListener("scroll",e.stateContainer),e},Stickybits.prototype.getClosestParent=function(t,s){var i=document.querySelector(s),e=t;if(e.parentElement===i)return i;for(;e.parentElement!==i;)e=e.parentElement;return i},Stickybits.prototype.computeScrollOffsets=function(t){var s=t,i=s.props,e=s.parent,o=!this.isWin&&"fixed"===i.positionVal,n="bottom"!==i.verticalPosition,r=o?i.scrollEl.getBoundingClientRect().top:0,a=o?e.getBoundingClientRect().top-r:e.getBoundingClientRect().top;return s.offset=r+i.stickyBitStickyOffset,s.stickyStart=n?a-s.offset:0,s.stickyStop=n?a+e.offsetHeight-(s.el.offsetHeight+s.offset):a+e.offsetHeight,s},Stickybits.prototype.toggleClasses=function(t,s,i){var e=t,o=e.className.split(" ");i&&-1===o.indexOf(i)&&o.push(i);var n=o.indexOf(s);-1!==n&&o.splice(n,1),e.className=o.join(" ")},Stickybits.prototype.manageState=function(t){var s=t,i=s.el,e=s.props,o=s.state,n=s.stickyStart,r=s.stickyStop,a=i.style,l=e.noStyles,c=e.positionVal,p=e.scrollEl,f=e.stickyClass,u=e.stuckClass,y=e.verticalPosition,k=function(t){t()},d=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||k,h=this.toggleClasses,S=this.isWin||document.querySelector(p).getBoundingClientRect().top?window.scrollY||window.pageYOffset:document.querySelector(p).scrollTop,m=S<=n&&"sticky"===o,v=S>=r&&"sticky"===o;return S>n&&S<r&&("default"===o||"stuck"===o)?(s.state="sticky",d(function(){h(i,u,f),a.position=c,l||(a.bottom="",a[y]=e.stickyBitStickyOffset+"px")})):m?(s.state="default",d(function(){h(i,f),"fixed"===c&&(a.position="")})):v&&(s.state="stuck",d(function(){h(i,f,u),"fixed"!==c||l||(a.top="",a.bottom="0",a.position="absolute")})),s},Stickybits.prototype.removeInstance=function(t){var s=t.el,i=t.props,e=this.toggleClasses;s.style.position="",s.style[i.verticalPosition]="",e(s,i.stickyClass),e(s,i.stuckClass),e(s.parentNode,i.parentClass)},Stickybits.prototype.cleanup=function(){for(var t=0;t<this.instances.length;t+=1){var s=this.instances[t];s.props.scrollEl.removeEventListener("scroll",s.stateContainer),this.removeInstance(s)}this.manageState=!1,this.instances=[]};export default stickybits;
/**
* stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
* @version v2.1.2
* @link https://github.com/dollarshaveclub/stickybits#readme
* @author Jeff Wainwright <jjwainwright2@gmail.com> (https://jeffry.in)
* @license MIT */
!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s():"function"==typeof define&&define.amd?define(s):t.stickybits=s()}(this,function(){"use strict";function t(t,s){var e=void 0!==s?s:{};this.version="2.1.2",this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={noStyles:e.noStyles||!1,stickyBitStickyOffset:e.stickyBitStickyOffset||0,parentClass:e.parentClass||"js-stickybit-parent",scrollEl:e.scrollEl||window,stickyClass:e.stickyClass||"js-is-sticky",stuckClass:e.stuckClass||"js-is-stuck",useStickyClasses:e.useStickyClasses||!1,verticalPosition:e.verticalPosition||"top"};var i=this.props;i.positionVal=this.definePosition()||"fixed";var o=i.verticalPosition,n=i.noStyles,r=i.positionVal;this.els="string"==typeof t?document.querySelectorAll(t):t,"length"in this.els||(this.els=[this.els]),this.instances=[];for(var a=0;a<this.els.length;a+=1){var l=this.els[a],c=l.style;if("top"!==o||n||(c[o]=i.stickyBitStickyOffset+"px"),"fixed"!==r&&!1===i.useStickyClasses)c.position=r;else{"fixed"!==r&&(c.position=r);var p=this.addInstance(l,i);this.instances.push(p)}}return this}return t.prototype.definePosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=document.head.style,e=0;e<t.length;e+=1)s.position=t[e]+"sticky";var i="fixed";return void 0!==s.position&&(i=s.position),s.position="",i},t.prototype.addInstance=function(t,s){var e=this,i={el:t,parent:t.parentNode,props:s},o=i.props;i.parent.className+=" "+s.parentClass;var n=o.scrollEl;return i.isWin=n===window,i.isWin||(n=this.getClosestParent(i.el,n)),this.computeScrollOffsets(i),i.state="default",i.stateContainer=function(){e.manageState(i)},n.addEventListener("scroll",i.stateContainer),i},t.prototype.getClosestParent=function(t,s){var e=document.querySelector(s),i=t;if(i.parentElement===e)return e;for(;i.parentElement!==e;)i=i.parentElement;return e},t.prototype.computeScrollOffsets=function(t){var s=t,e=s.props,i=s.parent,o=s.isWin,n=0,r=i.getBoundingClientRect().top;return o||"fixed"!==e.positionVal||(n=e.scrollEl.getBoundingClientRect().top,r=i.getBoundingClientRect().top-n),s.offset=n+e.stickyBitStickyOffset,"bottom"!==e.verticalPosition?(s.stickyStart=r-s.offset,s.stickyStop=r+i.offsetHeight-(s.el.offsetHeight+s.offset)):(s.stickyStart=0,s.stickyStop=r+i.offsetHeight),s},t.prototype.toggleClasses=function(t,s,e){var i=t,o=i.className.split(" ");e&&-1===o.indexOf(e)&&o.push(e);var n=o.indexOf(s);-1!==n&&o.splice(n,1),i.className=o.join(" ")},t.prototype.manageState=function(t){var s=t,e=s.el,i=s.props,o=s.state,n=s.stickyStart,r=s.stickyStop,a=e.style,l=i.noStyles,c=i.positionVal,p=i.scrollEl,f=i.stickyClass,u=i.stuckClass,y=i.verticalPosition,d=p.requestAnimationFrame;s.isWin&&void 0!==d||(d=function(t){t()});var k=this.toggleClasses,h=s.isWin?p.scrollY||p.pageYOffset:p.scrollTop,v=h>n&&h<r&&("default"===o||"stuck"===o),g=h<=n&&"sticky"===o,m=h>=r&&"sticky"===o;return v?(s.state="sticky",d(function(){k(e,u,f),a.position=c,l||(a.bottom="",a[y]=i.stickyBitStickyOffset+"px")})):g?(s.state="default",d(function(){k(e,f),"fixed"===c&&(a.position="")})):m&&(s.state="stuck",d(function(){k(e,f,u),"fixed"!==c||l||(a.top="",a.bottom="0",a.position="absolute")})),s},t.prototype.removeInstance=function(t){var s=t.el,e=t.props,i=this.toggleClasses;s.style.position="",s.style[e.verticalPosition]="",i(s,e.stickyClass),i(s,e.stuckClass),i(s.parentNode,e.parentClass)},t.prototype.cleanup=function(){for(var t=0;t<this.instances.length;t+=1){var s=this.instances[t];s.props.scrollEl.removeEventListener("scroll",s.stateContainer),this.removeInstance(s)}this.manageState=!1,this.instances=[]},function(s,e){return new t(s,e)}});
stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
@version v3.0.0
@link https://github.com/dollarshaveclub/stickybits#readme
@author Jeff Wainwright <yowainwright@gmail.com> (https://jeffry.in)
@license MIT
**/
!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s():"function"==typeof define&&define.amd?define(s):t.stickybits=s()}(this,function(){"use strict";function t(t,s){var e=void 0!==s?s:{};this.version='"3.0.0"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={noStyles:e.noStyles||!1,stickyBitStickyOffset:e.stickyBitStickyOffset||0,parentClass:e.parentClass||"js-stickybit-parent",scrollEl:e.scrollEl||window,stickyClass:e.stickyClass||"js-is-sticky",stuckClass:e.stuckClass||"js-is-stuck",useStickyClasses:e.useStickyClasses||!1,verticalPosition:e.verticalPosition||"top"};var i=this.props;i.positionVal=this.definePosition()||"fixed";var o=i.verticalPosition,n=i.noStyles,r=i.positionVal;this.els="string"==typeof t?document.querySelectorAll(t):t,"length"in this.els||(this.els=[this.els]),this.instances=[];for(var a=0;a<this.els.length;a+=1){var l=this.els[a],c=l.style;if(c[o]="top"!==o||n?"":i.stickyBitStickyOffset+"px",c.position=r,"fixed"===r||i.useStickyClasses){var p=this.addInstance(l,i);this.instances.push(p)}}return this}return t.prototype.definePosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=document.head.style,e=0;e<t.length;e+=1)s.position=t[e]+"sticky";var i=s.position?s.position:"fixed";return s.position="",i},t.prototype.addInstance=function(t,s){var e=this,i={el:t,parent:t.parentNode,props:s};this.isWin=this.props.scrollEl===window;var o=this.isWin?window:this.getClosestParent(i.el,i.props.scrollEl);return this.computeScrollOffsets(i),i.parent.className+=" "+s.parentClass,i.state="default",i.stateContainer=function(){return e.manageState(i)},o.addEventListener("scroll",i.stateContainer),i},t.prototype.getClosestParent=function(t,s){var e=document.querySelector(s),i=t;if(i.parentElement===e)return e;for(;i.parentElement!==e;)i=i.parentElement;return e},t.prototype.computeScrollOffsets=function(t){var s=t,e=s.props,i=s.parent,o=!this.isWin&&"fixed"===e.positionVal,n="bottom"!==e.verticalPosition,r=o?e.scrollEl.getBoundingClientRect().top:0,a=o?i.getBoundingClientRect().top-r:i.getBoundingClientRect().top;return s.offset=r+e.stickyBitStickyOffset,s.stickyStart=n?a-s.offset:0,s.stickyStop=n?a+i.offsetHeight-(s.el.offsetHeight+s.offset):a+i.offsetHeight,s},t.prototype.toggleClasses=function(t,s,e){var i=t,o=i.className.split(" ");e&&-1===o.indexOf(e)&&o.push(e);var n=o.indexOf(s);-1!==n&&o.splice(n,1),i.className=o.join(" ")},t.prototype.manageState=function(t){var s=t,e=s.el,i=s.props,o=s.state,n=s.stickyStart,r=s.stickyStop,a=e.style,l=i.noStyles,c=i.positionVal,p=i.scrollEl,f=i.stickyClass,u=i.stuckClass,y=i.verticalPosition,d=function(t){t()},h=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||d,k=this.toggleClasses,m=this.isWin||document.querySelector(p).getBoundingClientRect().top?window.scrollY||window.pageYOffset:document.querySelector(p).scrollTop,v=m<=n&&"sticky"===o,g=m>=r&&"sticky"===o;return m>n&&m<r&&("default"===o||"stuck"===o)?(s.state="sticky",h(function(){k(e,u,f),a.position=c,l||(a.bottom="",a[y]=i.stickyBitStickyOffset+"px")})):v?(s.state="default",h(function(){k(e,f),"fixed"===c&&(a.position="")})):g&&(s.state="stuck",h(function(){k(e,f,u),"fixed"!==c||l||(a.top="",a.bottom="0",a.position="absolute")})),s},t.prototype.removeInstance=function(t){var s=t.el,e=t.props,i=this.toggleClasses;s.style.position="",s.style[e.verticalPosition]="",i(s,e.stickyClass),i(s,e.stuckClass),i(s.parentNode,e.parentClass)},t.prototype.cleanup=function(){for(var t=0;t<this.instances.length;t+=1){var s=this.instances[t];s.props.scrollEl.removeEventListener("scroll",s.stateContainer),this.removeInstance(s)}this.manageState=!1,this.instances=[]},function(s,e){return new t(s,e)}});
{
"name": "stickybits",
"version": "2.1.2",
"version": "3.0.0",
"description": "Stickybits is a lightweight alternative to `position: sticky` polyfills",

@@ -8,13 +8,15 @@ "main": "dist/stickybits.js",

"scripts": {
"build": "gulp build",
"build:umd": "gulp build:umd && gulp build:umd:jquery",
"build:es": "gulp build:es",
"lint": "eslint .src/*.js --fix",
"build": "npm run test:unit && npm run build:es && npm run build:jquery && npm run build:standard && npm run build:umbrella",
"build:es": "rollup --config configs/rollup.config.es.js",
"build:jquery": "rollup --config configs/rollup.config.jquery.js",
"build:standard": "rollup --config configs/rollup.config.standard.js",
"build:umbrella": "rollup --config configs/rollup.config.umbrella.js",
"lint": "eslint . --fix",
"postpublish": "git tag $npm_package_version && git push origin --tags",
"pre-commit-msg": "Echo 'Running pre-commit checks...' && exit 0",
"release": "npm run lint && npm run build && npm test && gulp minify && npm run report:coverage",
"release": "npm run lint && npm run build && npm test && npm run report:coverage",
"report:coverage": "nyc report --reporter=lcov > coverage.lcov && codecov",
"test:es-check": "es-check es5 dist/stickybits.min.js dist/stickybits.js dist/jquery.stickybits.js dist/jquery.stickybits.min.js",
"test:es-check": "es-check es5 dist/stickybits.min.js dist/stickybits.js dist/jquery.stickybits.js dist/jquery.stickybits.min.js dist/umbrella.stickybits.js dist/umbrella.stickybits.min.js",
"test:unit": "nyc jest --coverage",
"test:acceptance": "gulp test --coverage",
"test:acceptance": "node ./scripts/acceptance.js --coverage",
"test": "npm run test:unit && npm run test:acceptance"

@@ -41,3 +43,3 @@ },

},
"author": "Jeff Wainwright <jjwainwright2@gmail.com> (https://jeffry.in)",
"author": "Jeff Wainwright <yowainwright@gmail.com> (https://jeffry.in)",
"license": "MIT",

@@ -51,5 +53,3 @@ "files": [

"babel-core": "^6.18.0",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-minify": "^0.2.0",
"bower": "^1.8.0",

@@ -60,12 +60,7 @@ "codecov": "^3.0.0",

"eslint": "^4.1.0",
"eslint-config-airbnb": "^16.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.3.0",
"gulp": "^3.9.1",
"gulp-codecov": "^3.0.1",
"gulp-header": "^2.0.1",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.6.1",
"gulp-uglify": "^3.0.0",
"eslint-config-standard": "^11.0.0-beta.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"jest": "^22.0.0",

@@ -77,7 +72,6 @@ "jquery": "^3.2.1",

"qunit": "^2.4.1",
"rollup": "0.55.0",
"rollup": "0.55.1",
"rollup-plugin-babel": "^3.0.0",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-eslint": "^4.0.0",
"rollup-plugin-node-resolve": "^3.0.1"
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-uglify": "^3.0.0"
},

@@ -84,0 +78,0 @@ "keywords": [

@@ -31,2 +31,4 @@ <p align="center">

**NOTE:** As of **StickyBits 3.0.0**, unminified versions are not built hence the big 3.0.0. Everything else should work as expected. Provide a pull request with new build requirements.
**Stickybits is awesome because:**

@@ -135,4 +137,3 @@ - it can add a CSS Sticky Class (`.js-is-sticky`) when [position: sticky](http://caniuse.com/#search=sticky) elements become active and a CSS Stuck Class (`.js-is-stuck`) when they become stuck. See [useStickyClasses](#feature).

```javascript
const scrollEl = document.getElementById('an-id');
stickybits('selector', {scrollEl: scrollEl});
stickybits('selector', {scrollEl: 'an-id'});
```

@@ -218,3 +219,3 @@ \* **Note:** This selector is not selected automatically so the specific element need to be passed in.

- [With Custom Classes](https://codepen.io/yowainwright/pen/rGwWyW/) ie: `stickybits('selector', {parentClass: 'js-parent-test'})`
- [ScrollEl](https://codepen.io/yowainwright/pen/EXzJeb) ie: `stickybits('selector', {scrollEl: document.querySelectorAll('a-custom-scroll-el')})`
- [ScrollEl](https://codepen.io/yowainwright/pen/EXzJeb) ie: `stickybits('selector', {scrollEl: 'a-custom-scroll-el'})`
- If you have Stickybits examples, please submit an [issue](https://github.com/dollarshaveclub/stickybits/issues) with a link to it. πŸ™

@@ -259,6 +260,4 @@

```javascript
const $scrollEl = $('#scrollEl')[0];
$('selector').stickybits({scrollEl: scrollEl});
$('selector').stickybits({scrollEl: '#scrollEl'});
```
\* **Note:** because StickyBits is _not_ jQuery specific, in order to pass in a selector for `scrollEl`, add a `[0]` to the the selector.

@@ -265,0 +264,0 @@ With `useStickyClasses`

@@ -6,3 +6,3 @@ import stickybits from './stickybits'

if (plugin) {
plugin.fn.stickybits = function stickybitsPlugin(opts) {
plugin.fn.stickybits = function stickybitsPlugin (opts) {
stickybits(this, opts)

@@ -9,0 +9,0 @@ }

@@ -53,5 +53,5 @@ /*

*/
function Stickybits(target, obj) {
function Stickybits (target, obj) {
const o = typeof obj !== 'undefined' ? obj : {}
this.version = '__VERSION__'
this.version = 'VERSION'
this.userAgent = window.navigator.userAgent || 'no `userAgent` provided by the browser'

@@ -66,3 +66,3 @@ this.props = {

useStickyClasses: o.useStickyClasses || false,
verticalPosition: o.verticalPosition || 'top',
verticalPosition: o.verticalPosition || 'top'
}

@@ -86,8 +86,6 @@ const p = this.props

const styles = el.style
if (vp === 'top' && !ns) styles[vp] = `${p.stickyBitStickyOffset}px`
if (pv !== 'fixed' && p.useStickyClasses === false) {
styles.position = pv
} else {
// const stickyManager = new ManageSticky(el, p)
if (pv !== 'fixed') styles.position = pv
// set vertical position
styles[vp] = vp === 'top' && !ns ? `${p.stickyBitStickyOffset}px` : ''
styles.position = pv
if (pv === 'fixed' || p.useStickyClasses) {
const instance = this.addInstance(el, p)

@@ -115,4 +113,3 @@ // instances are an array of objects

}
let stickyProp = 'fixed'
if (typeof test.position !== 'undefined') stickyProp = test.position
const stickyProp = test.position ? test.position : 'fixed'
test.position = ''

@@ -146,18 +143,14 @@ return stickyProp

*/
Stickybits.prototype.addInstance = function addInstance(el, props) {
Stickybits.prototype.addInstance = function addInstance (el, props) {
const item = {
el,
parent: el.parentNode,
props,
props
}
const p = item.props
this.isWin = this.props.scrollEl === window
const se = this.isWin ? window : this.getClosestParent(item.el, item.props.scrollEl)
this.computeScrollOffsets(item)
item.parent.className += ` ${props.parentClass}`
let se = p.scrollEl
item.isWin = se === window
if (!item.isWin) se = this.getClosestParent(item.el, se)
this.computeScrollOffsets(item)
item.state = 'default'
item.stateContainer = () => {
this.manageState(item)
}
item.stateContainer = () => this.manageState(item)
se.addEventListener('scroll', item.stateContainer)

@@ -175,3 +168,3 @@ return item

*/
Stickybits.prototype.getClosestParent = function getClosestParent(el, matchSelector) {
Stickybits.prototype.getClosestParent = (el, matchSelector) => {
// p = parent element

@@ -196,21 +189,17 @@ const p = document.querySelector(matchSelector)

*/
Stickybits.prototype.computeScrollOffsets = function computeScrollOffsets(item) {
Stickybits.prototype.computeScrollOffsets = function computeScrollOffsets (item) {
const it = item
const p = it.props
const parent = it.parent
const iw = it.isWin
let scrollElOffset = 0
let stickyStart = parent.getBoundingClientRect().top
if (!iw && p.positionVal === 'fixed') {
scrollElOffset = p.scrollEl.getBoundingClientRect().top
stickyStart = parent.getBoundingClientRect().top - scrollElOffset
}
const isCustom = !this.isWin && p.positionVal === 'fixed'
const isBottom = p.verticalPosition !== 'bottom'
const scrollElOffset = isCustom ? p.scrollEl.getBoundingClientRect().top : 0
const stickyStart = isCustom
? parent.getBoundingClientRect().top - scrollElOffset
: parent.getBoundingClientRect().top
it.offset = scrollElOffset + p.stickyBitStickyOffset
if (p.verticalPosition !== 'bottom') {
it.stickyStart = stickyStart - it.offset
it.stickyStop = (stickyStart + parent.offsetHeight) - (it.el.offsetHeight + it.offset)
} else {
it.stickyStart = 0
it.stickyStop = stickyStart + parent.offsetHeight
}
it.stickyStart = isBottom ? stickyStart - it.offset : 0
it.stickyStop = isBottom
? (stickyStart + parent.offsetHeight) - (it.el.offsetHeight + it.offset)
: stickyStart + parent.offsetHeight
return it

@@ -226,3 +215,3 @@ }

*/
Stickybits.prototype.toggleClasses = function toggleClasses(el, r, a) {
Stickybits.prototype.toggleClasses = (el, r, a) => {
const e = el

@@ -244,3 +233,3 @@ const cArray = e.className.split(' ')

*/
Stickybits.prototype.manageState = function manageState(item) {
Stickybits.prototype.manageState = function manageState (item) {
// cache object

@@ -267,8 +256,11 @@ const it = item

*/
let rAF = se.requestAnimationFrame
if (!it.isWin || typeof rAF === 'undefined') {
rAF = function rAFDummy(f) {
f()
}
}
const rAFStub = function rAFDummy (f) { f() }
const rAF = !this.isWin
? rAFStub
: window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
rAFStub
/*

@@ -283,3 +275,5 @@ define scroll vars

const tC = this.toggleClasses
const scroll = it.isWin ? se.scrollY || se.pageYOffset : se.scrollTop
const scroll = (this.isWin || document.querySelector(se).getBoundingClientRect().top)
? window.scrollY || window.pageYOffset
: document.querySelector(se).scrollTop
const notSticky = scroll > start && scroll < stop && (state === 'default' || state === 'stuck')

@@ -328,3 +322,3 @@ const isSticky = scroll <= start && state === 'sticky'

*/
Stickybits.prototype.removeInstance = function removeInstance(instance) {
Stickybits.prototype.removeInstance = function removeInstance (instance) {
const e = instance.el

@@ -346,3 +340,3 @@ const p = instance.props

*/
Stickybits.prototype.cleanup = function cleanup() {
Stickybits.prototype.cleanup = function cleanup () {
for (let i = 0; i < this.instances.length; i += 1) {

@@ -362,4 +356,4 @@ const instance = this.instances[i]

*/
export default function stickybits(target, o) {
export default function stickybits (target, o) {
return new Stickybits(target, o)
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚑️ by Socket Inc