From 123a9d0c1bce1ee2941e5629ac8fb063bcd17a1d Mon Sep 17 00:00:00 2001 From: Artem Kovalchuk Date: Sat, 12 Oct 2019 18:03:17 +0300 Subject: [PATCH] chore: remove unused docs --- docs/frames/basic.html | 69 ------ docs/frames/difference.html | 73 ------ docs/frames/fixed-panel.html | 69 ------ docs/frames/multiple-items.html | 109 --------- docs/frames/style.css | 179 -------------- docs/index.html | 268 --------------------- docs/main.css | 153 ------------ docs/sticksy.js | 415 -------------------------------- 8 files changed, 1335 deletions(-) delete mode 100644 docs/frames/basic.html delete mode 100644 docs/frames/difference.html delete mode 100644 docs/frames/fixed-panel.html delete mode 100644 docs/frames/multiple-items.html delete mode 100644 docs/frames/style.css delete mode 100644 docs/index.html delete mode 100644 docs/main.css delete mode 100644 docs/sticksy.js diff --git a/docs/frames/basic.html b/docs/frames/basic.html deleted file mode 100644 index 56d4929..0000000 --- a/docs/frames/basic.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - Sticksy.js - Basic example - - - -
-
Move down ↓
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
VERY BIG BLOCK
-
- - - - diff --git a/docs/frames/difference.html b/docs/frames/difference.html deleted file mode 100644 index 7b35310..0000000 --- a/docs/frames/difference.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - - - Difference from 'position: sticky' - - - -

Move down ↓

-
-
- - -
-
-

The End

- - - - diff --git a/docs/frames/fixed-panel.html b/docs/frames/fixed-panel.html deleted file mode 100644 index 3fab440..0000000 --- a/docs/frames/fixed-panel.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - Sticksy.js - Basic example - - - -
-
Move down ↓
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
VERY BIG BLOCK
-
- - - - diff --git a/docs/frames/multiple-items.html b/docs/frames/multiple-items.html deleted file mode 100644 index c9c4037..0000000 --- a/docs/frames/multiple-items.html +++ /dev/null @@ -1,109 +0,0 @@ - - - - - - - Sticksy.js - Multiple items - - - -

Move down ↓

-
-
-
-
-
😎
-
-
-
-
-
-
😎
-
-
-
😎
-
-
-
-
-
-
😎
-
-
-
-
VERY BIG BLOCK
- - - - diff --git a/docs/frames/style.css b/docs/frames/style.css deleted file mode 100644 index 342df26..0000000 --- a/docs/frames/style.css +++ /dev/null @@ -1,179 +0,0 @@ -*, *:after { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Inconsolata, Helvetica, sans-serif; - /* fix freezing issue in iframes */ - -webkit-backface-visibility: hidden; -} - -.container { - max-width: 700px; - margin: 0 auto; -} - -@media (max-width: 740px) { - .container { - padding-left: 15px; - padding-right: 15px; - } -} - -header.header { - width: 100%; - height: 60px; - font-size: 2rem; - font-weight: bold; - background: white; - border-bottom: 1px solid grey; - padding: 10px 0; - z-index: 50; -} - -.header.header--sticky { - position: sticky; - top: 0; -} - -footer { - padding: 20px 0; - height: 80px; - width: 100%; - background: #eff1f3; -} - -header, footer { - font-size: 2rem; - text-align: center; -} - -.content { display: flex; } - -main { - padding: 20px 0; - padding-right: 15px; - flex: 1; -} - -aside { - margin-left: 30px; -} - -.title { - width: 100%; - height: 30px; - margin-bottom: 10px; - background: #eff1f3; -} - -.text { - width: 100%; - height: 30px; - margin-bottom: 1.25rem; - background: #eff1f3; -} - -.text:nth-child(3n+2) { - width: 90%; -} - -.text:nth-child(2n+3) { - width: 95%; -} - -.image { - position: relative; - width: 100%; - height: 200px; - background: #f1f5f6; - margin-bottom: 1.25rem; - overflow: hidden; -} - -.image .mountain:nth-child(1n) { - position: absolute; - content: ''; - right: 36%; - right: calc(36% + ((100% - 465px)/7)); - top: 70px; - width: 0; - height: 0; - border-style: solid; - border-width: 0 130px 130px 100px; - border-color: transparent transparent #d7dee1 transparent; - z-index: 2; -} - -.image .mountain:nth-child(2n) { - position: absolute; - content: ''; - right: 12%; - right: calc(12% + ((100% - 465px) / 6)); - top: 100px; - width: 0; - height: 0; - border-style: solid; - border-width: 0 100px 100px 100px; - border-color: transparent transparent rgba(128, 128, 128, 0.1) transparent; - z-index: 1; -} - -.image .sun { - position: absolute; - content: ''; - background: rgba(128, 128, 128, 0.1); - right: 12%; - top: 40px; - width: 40px; - height: 40px; - border-radius: 50%; -} - -.widget { - display: flex; - justify-content: center; - align-items: center; - width: 150px; - height: 150px; - margin: 15px 0; - font-weight: bold; - font-size: 20px; - color: rgba(0, 0, 0, 0.33); - background: #eff1f3; -} - -.widget.js-sticky-widget { - cursor: pointer; - background: #fdf3f7; - color: #fb93b5; - border: 2px solid #fb93b5; - transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; -} - -.widget--sticky { - background: #F05382 !important; - border: 2px solid #F05382 !important; - color: rgba(255, 255, 255, 0.9) !important; -} - -.filler { - display: flex; - justify-content: center; - align-items: center; - font-size: 2rem; - margin: 1rem 0; - height: 95vh; - width: 100%; - color: #d2d2d2; - border: 2px dashed #ffc4c4; -} - -/*footer, .text, .title, .image {*/ -/* border-radius: 2px;*/ -/*}*/ - -/*.filler, .widget {*/ -/* border-radius: 4px;*/ -/*}*/ diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 93fe06c..0000000 --- a/docs/index.html +++ /dev/null @@ -1,268 +0,0 @@ - - - - - - - - - - - - - Sticksy.js - - - - - -
-
-

- - Sticksy.js 📌 - -

-

- Sticksy.js is a zero-dependency JavaScript - library for making - cool things like fixed widgets. - It sticks elements to the top until they reaching the bottom. - Unlike Q2W3 WordPress Plugin, - you don't need WordPress, jQuery, or other stuff. It's light, simple and ultra fast ⚡. -
-

-

- Made with ❤️ by @kovart. - Available on Github. - Licensed MIT. -

-

- DOWNLOAD - READ API -

-
-
-
-

Example

- 
var stickyEl = new Sticksy('.js-sticky-widget') // and that's all!
-
-
Try in action
- -
-

- View code -

-
-

The difference from 'position: sticky'

-

- Sticksy.js is not a 'position: sticky' polyfill. - Sticksy affects on the sibling elements. Look at example below. -

-
-
The Difference
- -
-

- View code -

-
-

Installation

-

- You can simply install the library from CDN, NPM, Yarn or just download it from - this repo. -

-

CDN

- 
<script src="https://cdn.jsdelivr.net/npm/sticksy/dist/sticksy.min.js"></script>
-

NPM

- 
$ npm install sticksy --save
-
-

Usage

-

Watch an example.

- 
<!-- Container -->
-<aside class="sidebar">
-    <!-- Non sticky element -->
-    <div class="widget"></div>
-    <!-- Sticky element -->
-    <div class="widget js-sticky-widget"></div>
-    <div class="widget"></div>
-    <div class="widget"></div>
-</aside>
-

- ⚠️ - The container shouldn't be absolutely positioned as we use - absolute position to stuck the elements to the bottom. - -

-

- Then you should initialize an instance with a new keyword (it's important): -

- 
var stickyElement = new Sticksy('.js-sticky-widget');
-// you can handle state changing
-stickyEl.onStateChanged = function (state) {
-    if(state === 'fixed') {
-        stickyEl.nodeRef.classList.add('widget--sticky')
-    } else {
-        stickyEl.nodeRef.classList.remove('widget--sticky')
-    }
-}
-

- That's all. 😎 - See a full example - here. -

-

Usage with Fixed Top Panel

-

If you have fixed top panel, you can easily deal with it by - topSpacing - option. -

- 
var stickyEl = new Sticksy('.js-sticky-widget', {topSpacing: 70})
-
-
Fixed panel example
- -
-

- View code -

-
-

Initialize all sticky elements

-

- It is helpful if you have, for example, two sidebars with the same CSS classes. -

- 
<aside class="sidebar">
-    <div class="widget"></div>
-    <!-- Sticky element -->
-    <div class="widget js-sticky-widget"></div>
-</aside>
-<main>
-    <!-- Some content here -->
-</main>
-<aside class="sidebar">
-    <!-- Sticky element -->
-    <div class="widget js-sticky-widget"></div>
-    <div class="widget "></div>
-</aside>
- 
var stickyElements = Sticksy.initializeAll('.js-sticky-widget')
-
-
Multiple items demo
- -
-

View code

-
-

Dynamically changing elements

-

- The library can detect changes of the container and its children. - It uses MutationObserver - for this. - If you want the library to react on DOM changes, you need to specify - listen - option. -

- 
var stickyEl = new Sticksy('.js-sticky-widget', {
-    listen: true, // Listen for the DOM changes in the container
-});
-

- ⚠️ - - Beware! - Since the library uses style attribute to change elements position, - it ignores changes of width and height properties of sticky elements. Use CSS classes instead. - -

-

Usage with JQuery/Zepto

-

The library is automatically injected into jQuery, so you can use them together.

- 
var stickyElement = $('.widget.js-sticky-widget').sticksy();
-
-

API

-

See the full API in the github repo.

-
-

Browser Compatibility

-

- Sticksy.js - works in all modern browsers including Internet Explorer 11. - If you want the library to react on DOM changes and need to support IE10 or below, - you should install Mutation Observer Polyfill. -

-
-

Performance

-

- Performance is ultra high ⚡.
- The library uses the simplest function to calculate the elements state: -

- 
Constructor.prototype._calcState = function (windowOffset) {
-    if (windowOffset < this._limits.top) {
-        return STATES.Static
-    } else if (windowOffset >= this._limits.bottom) {
-        return STATES.Stuck
-    }
-    return STATES.Fixed
-}
-

- The function doesn't have any complicated calculations. It just compares two variables. Not more. - If the calculated state is the same as previous the library does nothing.

- - Cool, right? 😃 -

-
-

Author

-

- Artem Kovalchuk
- GitHub. - Facebook. - LinkedIn. -

-
-

License

-

MIT License

-
- - - - - - - - diff --git a/docs/main.css b/docs/main.css deleted file mode 100644 index fac4e7a..0000000 --- a/docs/main.css +++ /dev/null @@ -1,153 +0,0 @@ -:root { - --black: #222222; - --blue: #0074d9; - --sticksy: #ea5063; - --demo: #545458; - --link: var(--blue); -} - -html { - font: 18px/1.5 Inconsolata, "Helvetica", sans-serif; - color: var(--black); -} - -@media (min-width: 456px) { - body { - margin-top: 2.5rem - } -} - -@media (min-width: 700px) { - html { - font-size: 20px - } - - body { - margin-top: 5rem - } -} - - -h1, h2, h3, h4, h5, h6 { - font-family: Montserrat, sans-serif; - margin: 0 0 0.5rem -0.1rem; - line-height: 1; - color: #111; - text-rendering: optimizeLegibility; -} - -h1 { - font-size: 3rem; - font-family: "Montserrat", sans-serif; - color: var(--sticksy); - margin-bottom: 3rem; -} - -h1 a { - color: inherit; -} - -h2 { - margin-top: 2.5rem; - font-size: 1.5rem; - margin-bottom: 1rem; -} - -h3 { - font-size: 1.3rem; - margin-top: 1.5rem; - margin-bottom: 1rem; -} - -a { - text-decoration: none; - color: var(--link); -} - -a:hover, a:focus { - text-decoration: underline; -} - -.button { - --color: var(--black); - display: inline-block; - cursor: pointer; - padding: 0.65rem 1rem; - size: 1rem; - color: var(--color); - border: 1px solid var(--color); - background: white; -} - -.button:hover, .button:focus { - background: var(--color); - color: white; - text-decoration: none; -} - -.button:active { - transform: scale(0.94); -} - -.button.button--red { - --color: var(--sticksy); -} - -.button.button--blue { - --color: var(--blue); -} - -hr { - border: none; - margin: 1.5rem 0; - border-bottom: 1px solid #ccc; - position: relative; - top: -1px; -} - -pre, code { - padding: .5rem 1rem; - font-size: 0.8rem; - background: #f6f6f6; -} - -code { - font-family: "Inconsolata", monospace; - background: #f6f6f6 !important; -} - -.container { - max-width: 30rem; - margin: 0 auto; - padding: 0 1rem; -} - -mark.code { - word-break: break-all; - display: inline-block; - padding: 3px 5px; - background: #F0F0F0; -} - - -.block { - padding: 25px; - border: 1px solid #1e1e1e; -} - -.demo { - width: 100%; - border: 1px solid var(--demo); -} - -.demo__title { - padding: 10px 20px; - background: var(--demo); - color: white; -} - -.demo__frame { - width: 100%; - min-height: 20rem; - max-height: 85vh; -} diff --git a/docs/sticksy.js b/docs/sticksy.js deleted file mode 100644 index 0d66fef..0000000 --- a/docs/sticksy.js +++ /dev/null @@ -1,415 +0,0 @@ -/** - * Sticksy.js - * A library for making cool things like fixed widgets. - * Dependency-free. ES5 code. - * - - * @version 0.1.2 - * @url https://github.com/kovart/sticksy - * @author Artem Kovalchuk - * @license The MIT License (MIT) - */ - -window.Sticksy = (function () { - "use strict" - - var STATES = { - Static: 'static', - Fixed: 'fixed', - Stuck: 'stuck', - } - - // All instances of Sticksy - var instances = [] - - /** - * Constructor function for Sticksy - * @param {(string|Element)} target Sticky element or query - * @param {Object=} options Options object - * @param {boolean=} options.listen Listen for DOM changes in container - * @param {number=} options.topSpacing Top indent when element has 'fixed' state - * @constructor - */ - function Constructor(target, options) { - if (!target) throw new Error("You have to specify the target element") - if (typeof target !== 'string' && !(target instanceof Element)) - throw new Error('Expected a string or element, but got: ' + Object.prototype.toString.call(target)) - var targetEl = Utils.findElement(target) - if (!targetEl) throw new Error("Cannot find target element: " + target) - var containerEl = targetEl.parentNode - if (!containerEl) throw new Error("Cannot find container of target element: " + target) - - options = options || {} - - this._props = { - containerEl: containerEl, - targetEl: targetEl, - topSpacing: options.topSpacing || 0, - listen: options.listen || false, // listen for the DOM changes in container - } - - /** - * Called when state of sticky element has changed - * @type {Function|null} Callback - */ - this.onStateChanged = null - /** - * DOM Element reference of sticky element - * @type {Element} nodeRef - */ - this.nodeRef = targetEl - - instances.push(this) - this._initialize(this._props) - } - - Constructor.prototype._initialize = function () { - var that = this - - this.state = STATES.Static - - this._stickyNodes = [] - // Since sticky nodes may have a fixed position, - // the library injects cloned (dummy) nodes to avoid problems with a DOM flow - this._dummyNodes = [] - // The main idea of the library is that a sticky element makes lower elements sticky also - // So we add lower siblings as they are sticky also - var sibling = this._props.targetEl - while (sibling) { - var clone = sibling.cloneNode(true) - clone.style.visibility = 'hidden' - clone.className += ' sticksy-dummy-node' - clone.removeAttribute('id') - this._props.targetEl.parentNode.insertBefore(clone, this._props.targetEl) - - this._stickyNodes.push(sibling) - this._dummyNodes.push(clone) - sibling = sibling.nextElementSibling - } - - // Used when we calc the state of elements - this._stickyNodesHeight = 0 - - // Positions of the scroll when the elements are fixed (sticky) - this._limits = { - top: 0, - bottom: 0 - } - - // MutationObserver state - this._isListening = false - - // The library uses 'position: absolute' to stuck sticky nodes to the bottom of the container - this._props.containerEl.style.position = 'relative' - // Flexbox doesn't collapse margin of items - this._shouldCollapseMargins = getComputedStyle(this._props.containerEl).display.indexOf('flex') === -1 - - // Listen for DOM changes in the container - if (this._props.listen) { - this._mutationObserver = new MutationObserver(function (mutations) { - that.hardRefresh() - }) - - this._startListen() - } - this.hardRefresh() - } - - Constructor.prototype._startListen = function(){ - if(!this._props.listen || this._isListening) return - this._mutationObserver.observe(this._props.containerEl, { - attributes: true, - characterData: true, - childList: true, - subtree: true, - }) - this._isListening = true - } - - Constructor.prototype._stopListen = function(){ - if(!this._props.listen || !this._isListening) return - this._mutationObserver.disconnect() - this._isListening = false - } - - Constructor.prototype._calcState = function (windowOffset) { - if (windowOffset < this._limits.top) { - return STATES.Static - } else if (windowOffset >= this._limits.bottom) { - return STATES.Stuck - } - return STATES.Fixed - } - - Constructor.prototype._updateStickyNodesHeight = function () { - this._stickyNodesHeight = Utils.getComputedBox(this._stickyNodes[this._stickyNodes.length - 1]).bottomWithMargin - - Utils.getComputedBox(this._stickyNodes[0]).topWithMargin - } - - Constructor.prototype._updateLimits = function () { - var containerEl = this._props.containerEl, - stickyNodes = this._stickyNodes - - var containerBox = Utils.getComputedBox(containerEl), - topNodeBox = Utils.getComputedBox(stickyNodes[0]) - - this._limits = { - top: topNodeBox.topWithMargin - this._props.topSpacing, - bottom: containerBox.bottom - containerBox.paddingBottom - this._props.topSpacing - this._stickyNodesHeight - } - } - - Constructor.prototype._applyState = function(state){ - // We enable dummy nodes at the end - // to avoid 'scrolling down effect' in Chrome - if (state === STATES.Static) { - this._resetElements(this._stickyNodes) - this._disableElements(this._dummyNodes) - } else { - this._fixElementsSize(this._stickyNodes) - if (state === STATES.Fixed) { - this._fixElements(this._stickyNodes) - } else { - this._stuckElements(this._stickyNodes) - } - this._enableElements(this._dummyNodes) - } - } - - /** - * Recalculate the position - * @public - */ - Constructor.prototype.refresh = function () { - var state = this._calcState(window.pageYOffset, this._limits) - if (state === this.state) return - - this._stopListen() - this._applyState(state) - this.state = state - this._startListen() - - if (typeof this.onStateChanged === 'function') { - this.onStateChanged(state) - } - } - - /** - * Reset, recalculate and then update the position - * @public - */ - Constructor.prototype.hardRefresh = function () { - this._stopListen() - var oldState = this.state - // reset state for recalculation - this.state = STATES.Static - this._applyState(this.state) - this._fixElementsSize(this._stickyNodes) - this._updateStickyNodesHeight() - this._updateLimits() - this.state = this._calcState(window.pageYOffset, this._limits) - this._applyState(this.state) - this._startListen() - - if (typeof this.onStateChanged === 'function' && oldState !== this.state) { - this.onStateChanged(this.state) - } - } - - /** - * Disable 'sticky' effect - * @public - */ - Constructor.prototype.disable = function(){ - this.state = STATES.Static - this._applyState(this.state) - instances.splice(instances.indexOf(this), 1) - } - - /** - * Enable 'sticky' effect - * @public - */ - Constructor.prototype.enable = function(){ - instances.push(this) - this.hardRefresh() - } - - /* -------------------------- - * Operations with elements - * -------------------------- */ - - Constructor.prototype._fixElements = function (elements) { - var previousMarginBottom = 0 // for margins collapse - var offset = this._props.topSpacing - for (var i = 0; i < elements.length; i++) { - var el = elements[i] - var box = Utils.getComputedBox(el) - var extraMarginTop = this._shouldCollapseMargins ? - Math.max(0, previousMarginBottom - box.marginTop) : previousMarginBottom - el.style.position = 'fixed' - el.style.top = offset + extraMarginTop + 'px' - el.style.bottom = '' - offset += box.height + box.marginTop + extraMarginTop - previousMarginBottom = box.marginBottom - } - } - - Constructor.prototype._stuckElements = function (elements) { - var previousMarginTop = 0 // for margins collapse - // we add offset because the container padding doesn't affect on absolute position - var offset = Utils.getComputedBox(this._props.containerEl).paddingBottom - for (var i = elements.length - 1; i >= 0; i--) { - var el = elements[i] - var box = Utils.getComputedBox(el) - var extraMarginBottom = this._shouldCollapseMargins ? - Math.max(0, previousMarginTop - box.marginBottom) : previousMarginTop - el.style.position = 'absolute' - el.style.top = 'auto' - el.style.bottom = offset + extraMarginBottom + 'px' - offset += box.height + box.marginBottom + extraMarginBottom - previousMarginTop = box.marginTop - } - } - - Constructor.prototype._resetElements = function (elements) { - elements.forEach(function (el) { - el.style.position = '' - el.style.top = '' - el.style.bottom = '' - el.style.height = '' - el.style.width = '' - }) - } - - Constructor.prototype._disableElements = function (elements) { - elements.forEach(function (el) { - el.style.display = 'none' - }) - } - - Constructor.prototype._enableElements = function (elements) { - for (var i = 0; i < elements.length; i++) { - elements[i].style.display = getComputedStyle(this._stickyNodes[i]).display - } - } - - Constructor.prototype._fixElementsSize = function () { - for (var i = 0; i < this._stickyNodes.length; i++) { - var stickyNode = this._stickyNodes[i] - var style = getComputedStyle(stickyNode) - stickyNode.style.width = style.width - stickyNode.style.height = style.height - } - } - - /* ------------------------ - * Static methods - * ------------------------ */ - - Constructor.refreshAll = function () { - for (var i = 0; i < instances.length; i++) { - instances[i].refresh() - } - } - - Constructor.hardRefreshAll = function () { - for (var i = 0; i < instances.length; i++) { - instances[i].hardRefresh() - } - } - - Constructor.disableAll = function(){ - var copy = instances.slice() - for (var i = 0; i < copy.length; i++) { - instances[i].disable() - } - } - - // Should we add enableAll method? - - /** - * Initialize all sticky elements - * @param {string|Element|Element[]|jQuery} target - Query string, DOM elements or JQuery object - * @param {{topSpacing: number=, listen: boolean=}=} options - Constructor options - * @param {boolean=} ignoreNothingFound - Don't throw an error if there are no elements that satisfying selector. - * @returns {(Constructor)[]} - */ - Constructor.initializeAll = function (target, options, ignoreNothingFound) { - if (typeof target === 'undefined') throw new Error("'target' parameter is undefined") - - var elements = [] - if (target instanceof Element) { - elements = [target] - } else if (typeof target.length !== 'undefined' && target.length > 0 && target[0] instanceof Element) { - // check if JQuery object and fetch native DOM elements - elements = typeof target.get === 'function' ? target.get() : target - } else if (typeof target === 'string') { - elements = document.querySelectorAll(target) || [] - } - - // There may be situations when we have several sticky elements in one parent - // To resolve this situation we take only the first element - var parents = [] - var stickyElements = [] - elements.forEach(function (el) { - if (parents.indexOf(el.parentNode) !== -1) return - parents.push(el.parentNode) - stickyElements.push(el) - }) - - if (!ignoreNothingFound && !stickyElements.length) throw new Error('There are no elements to initialize') - return stickyElements.map(function (el) { - return new Constructor(el, options) - }) - } - - /* ------------------------ - * Refresh events - * ------------------------ */ - - window.addEventListener('scroll', Constructor.refreshAll) - window.addEventListener('resize', Constructor.hardRefreshAll) - - /* ------------------------ - * Helpers - * ------------------------ */ - - var Utils = { - parseNumber: function (val) { - return parseFloat(val) || 0 - }, - findElement: function (el, root) { - if (!root) root = document - return ('string' === typeof el) ? root.querySelector(el) : - (el instanceof Element) ? el : undefined - }, - getComputedBox: function (elem) { - var box = elem.getBoundingClientRect() - var style = getComputedStyle(elem) - - // Should I add borders width? - return { - height: box.height, - width: box.width, - top: window.pageYOffset + box.top, - bottom: window.pageYOffset + box.bottom, - marginTop: Utils.parseNumber(style.marginTop), - marginBottom: Utils.parseNumber(style.marginBottom), - paddingTop: Utils.parseNumber(style.paddingTop), - paddingBottom: Utils.parseNumber(style.paddingBottom), - topWithMargin: window.pageYOffset + box.top - Utils.parseNumber(style.marginTop), - bottomWithMargin: window.pageYOffset + box.bottom + Utils.parseNumber(style.marginBottom), - } - }, - } - - return Constructor -}()); - -// Jquery Injection -var jQueryPlugin = window.$ || window.jQuery || window.Zepto -if (jQueryPlugin) { - jQueryPlugin.fn.sticksy = function sticksyPlugin(opts) { - return Sticksy.initializeAll(this, opts) - } -}