├── .babelrc
├── .gitignore
├── .travis.yml
├── Gulpfile.js
├── LICENSE.md
├── README.md
├── bower.json
├── dist
    ├── jquery.sticky-sidebar.js
    ├── jquery.sticky-sidebar.js.map
    ├── jquery.sticky-sidebar.min.js
    ├── sticky-sidebar.js
    ├── sticky-sidebar.js.map
    └── sticky-sidebar.min.js
├── package.json
├── src
    ├── jquery.sticky-sidebar.js
    └── sticky-sidebar.js
└── test
    ├── index.html
    ├── mockraf.js
    └── test.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "plugins": [
 3 |     "transform-es2015-modules-umd",
 4 |       "check-es2015-constants",
 5 |       "transform-es2015-block-scoped-functions",
 6 |       "transform-es2015-arrow-functions",
 7 |       "transform-es2015-classes",
 8 |       "transform-es2015-parameters",
 9 |       "transform-es2015-block-scoping",
10 |       "transform-export-extensions"
11 |    ]
12 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | /node_modules/
3 | /bower_components/
4 | docs/_site
5 | docs/.sass-cache
6 | 
7 | /dist/


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false,
 2 | 
 3 | language: node_js
 4 | 
 5 | node_js:
 6 |   - 6
 7 | 
 8 | before_install:
 9 |   - npm install -g bower
10 | 
11 | install: 
12 |   - npm install
13 |   - bower install 
14 | 
15 | script: 
16 |   - gulp


--------------------------------------------------------------------------------
/Gulpfile.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const gulp = require("gulp");
 3 | const sourcemaps = require("gulp-sourcemaps");
 4 | const babel = require("gulp-babel");
 5 | const uglify = require('gulp-uglify');
 6 | const rename = require('gulp-rename');
 7 | const header = require('gulp-header');
 8 | const gutil = require('gulp-util');
 9 | const rollup = require('gulp-rollup');
10 | const resolve =  require('rollup-plugin-node-resolve');
11 | const commonjs = require('rollup-plugin-commonjs');
12 | const pkg = require('./package.json'); 
13 | 
14 | const banner = [
15 |   '/**',
16 |   ' * <%= pkg.name %> - <%= pkg.description %>',
17 |   ' * @version v<%= pkg.version %>',
18 |   ' * @link <%= pkg.homepage %>',
19 |   ' * @author <%= pkg.author %>',
20 |   ' * @license <%= pkg.license %>',
21 |   '**/',
22 |   '',
23 | ].join('\n');
24 | 
25 | gulp.task("babel", function(){
26 |   return gulp.src("src/*.js")
27 |     .pipe(babel())
28 |     .pipe(gulp.dest("dist"));
29 | });
30 | 
31 | gulp.task('bundle', ['babel'], function(){
32 |   return gulp.src(["dist/sticky-sidebar.js", "dist/jquery.sticky-sidebar.js"])
33 |     .pipe(sourcemaps.init())
34 |     // transform the files here.
35 |     .pipe(rollup({
36 |       allowRealFiles: true,
37 |       // any option supported by Rollup can be set here.
38 |       input: ['./dist/sticky-sidebar.js', './dist/jquery.sticky-sidebar.js'],
39 |       format: 'umd',
40 |       name: 'StickySidebar',
41 |       plugins: [ resolve(), commonjs() ]
42 |     }))
43 |     .pipe(sourcemaps.write('.'))
44 |     .pipe(gulp.dest('./dist'));
45 | });
46 | 
47 | gulp.task('uglify', ['bundle'], function(){
48 |   return gulp.src(["dist/sticky-sidebar.js", "dist/jquery.sticky-sidebar.js"])
49 |     .pipe(uglify())
50 |     .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
51 |     .pipe(header(banner, {pkg}))
52 |     .pipe(rename({ suffix: '.min' }))
53 |     .pipe(gulp.dest("dist/"));
54 | });
55 | 
56 | gulp.task('watch', function() {
57 |   gulp.watch('src/*.js', ['default']);
58 | });
59 | 
60 | gulp.task('default', ['babel', 'bundle', 'uglify']);


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License
2 | 
3 | Copyright (c) 2017 Ahmed Bouhuolia 
4 | 
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 | 
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 | 
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Sticky Sidebar [![Build Status](https://travis-ci.org/abouolia/sticky-sidebar.svg?branch=3.2.0)](https://travis-ci.org/abouolia/sticky-sidebar)
  2 | 
  3 | Pure JavaScript plugin for making smart and high performance sticky sidebars.
  4 | 
  5 | [Basic Example](https://abouolia.github.io/sticky-sidebar/examples/basic.html)
  6 | 
  7 | [Scrollable Sticky Element](https://abouolia.github.io/sticky-sidebar/examples/scrollable-element.html)
  8 | 
  9 | For complete documentation and examples see [abouolia.github.com/sticky-sidebar](http://abouolia.github.com/sticky-sidebar)
 10 | 
 11 | ## Why is sticky sidebar so awesome?
 12 | 
 13 | * It does not re-calculate all dimensions when scrolling, just necessary dimensions.
 14 | * Super smooth without incurring scroll lag or jank and no page reflows.
 15 | * Integrated with resize sensor to re-calculate all dimenstions of the plugin when size of sidebar or its container is changed.
 16 | * It has event trigger on each affix type to hook your code under particular situation.
 17 | * Handle the sidebar when is tall or too short compared to the rest of the container.
 18 | * Zero dependencies and super simple to setup.
 19 | 
 20 | ## Install
 21 | 
 22 | You can download sticky sidebar jQuery plugin from Bowser, NPM or just simply download it from this page and link to the ``sticky-sidebar.js`` file in your project folder.
 23 | 
 24 | #### Bower
 25 | 
 26 | If you are using bower as package manager:
 27 | 
 28 | ````
 29 | bower install sticky-sidebar
 30 | ````
 31 | 
 32 | #### NPM
 33 | 
 34 | If you are using NPM as package manager:
 35 | 
 36 | ````
 37 | npm install sticky-sidebar
 38 | ````
 39 | 
 40 | ## Usage
 41 | 
 42 | Your website's html structure has to be similar to this in order to work:
 43 | 
 44 | ````html
 45 | <div class="main-content">
 46 |     <div class="sidebar">
 47 |         <div class="sidebar__inner">
 48 |             <!-- Content goes here -->
 49 |         </div>
 50 |     </div>
 51 |     <div class="content">
 52 |         <!-- Content goes here -->
 53 |     </div>
 54 | </div>
 55 | ````
 56 | 
 57 | Note that inner sidebar wrapper ``.sidebar__innner`` is optional but highly recommended, if you don't write it yourself, the script will create one for you under class name ``inner-wrapper-sticky``. but this may cause many problems.
 58 | 
 59 | For the above example, you can use the following JavaScript:
 60 | 
 61 | ````html
 62 | <script type="text/javascript" src="./js/sticky-sidebar.js"></script>
 63 | 
 64 | <script type="text/javascript">
 65 |   var sidebar = new StickySidebar('.sidebar', {
 66 |     topSpacing: 20,
 67 |     bottomSpacing: 20,
 68 |     containerSelector: '.main-content',
 69 |     innerWrapperSelector: '.sidebar__inner'
 70 |   });
 71 | </script>
 72 | ````
 73 | 
 74 | #### Via jQuery/Zepto
 75 | 
 76 | You can configure sticky sidebar as a jQuery plugin, just include ``jquery.sticky-sidebar.js`` instead ``sticky-sidebar.js`` file than configure it as any jQuery plugin.
 77 | 
 78 | ````html
 79 | <script type="text/javascript" src="./js/jquery.js"></script>
 80 | <script type="text/javascript" src="./js/jquery.sticky-sidebar.js"></script>
 81 | 
 82 | <script type="text/javascript">
 83 |   $('#sidebar').stickySidebar({
 84 |     topSpacing: 60,
 85 |     bottomSpacing: 60
 86 |   });
 87 | </script>
 88 | ````
 89 | 
 90 | Make sure to include ``sticky-sidebar.js`` script file after ``jquery.js``.
 91 | 
 92 | ## Usage with [ResizeSensor.js](https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js)
 93 | 
 94 | Sticky sidebar integrated with [ResizeSensor.js](https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js) to detect when sidebar or container is changed. To use resize sensor with this plugin just make sure to include ResizeSensor.js before `sticky-sidebar.js` code whether through module loader, bundle or event inclusion as a `<script>` and enable `resizeSensor` option (enabled by default) and it will works.
 95 | 
 96 | You can choose not to include `ResizeSensor.js` and sticky sidebar will continue work without any problem but without automatically detect resize changes.
 97 | 
 98 | ## Browser Support
 99 | 
100 | Sticky sidebar works in all modern browsers including Internet Explorer 9 and above, but if you want it to work with IE9, should include [`requestAnimationFrame`](https://gist.github.com/paulirish/1579671) polyfill before sticky sidebar code.
101 | 
102 | If you have any issues with browser compatibility don’t hesitate to [Submit an issue](https://github.com/abouolia/sticky-sidebar/issues/new).
103 | 
104 | ## License
105 | 
106 | Sticky Sidebar is released under the MIT license. Have at it.
107 | 
108 | -------
109 | 
110 | Made by Ahmed Bouhuolia
111 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sticky-sidebar",
 3 |   "description": "A JavaScript plugin for making smart and high performance.",
 4 |   "version": "3.3.1",
 5 |   "authors": [
 6 |     "Ahmed Bouhuolia <a.bouhuolia@gmail.com>"
 7 |   ],
 8 |   "license": "MIT",
 9 |   "main": "./sticky-sidebar.js",
10 |   "keywords": [
11 |     "sticky",
12 |     "sidebar"
13 |   ],
14 |   "ignore": [
15 |     "node_modules",
16 |     "bower_components",
17 |     "docs/_site",
18 |     "docs/.sass-cache"
19 |   ],
20 |   "dependencies": {},
21 |   "homepage": "https://github.com/abouolia/sticky-sidebar",
22 |   "devDependencies": {
23 |     "raf.js": "~0.0.4"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/dist/jquery.sticky-sidebar.js:
--------------------------------------------------------------------------------
  1 | (function (global, factory) {
  2 | 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3 | 	typeof define === 'function' && define.amd ? define(factory) :
  4 | 	(global.StickySidebar = factory());
  5 | }(this, (function () { 'use strict';
  6 | 
  7 | var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
  8 | 
  9 | 
 10 | 
 11 | function unwrapExports (x) {
 12 | 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 13 | }
 14 | 
 15 | function createCommonjsModule(fn, module) {
 16 | 	return module = { exports: {} }, fn(module, module.exports), module.exports;
 17 | }
 18 | 
 19 | var stickySidebar = createCommonjsModule(function (module, exports) {
 20 | (function (global, factory) {
 21 |   if (typeof undefined === "function" && undefined.amd) {
 22 |     undefined(['exports'], factory);
 23 |   } else {
 24 |     factory(exports);
 25 |   }
 26 | })(commonjsGlobal, function (exports) {
 27 |   Object.defineProperty(exports, "__esModule", {
 28 |     value: true
 29 |   });
 30 | 
 31 |   function _classCallCheck(instance, Constructor) {
 32 |     if (!(instance instanceof Constructor)) {
 33 |       throw new TypeError("Cannot call a class as a function");
 34 |     }
 35 |   }
 36 | 
 37 |   var _createClass = function () {
 38 |     function defineProperties(target, props) {
 39 |       for (var i = 0; i < props.length; i++) {
 40 |         var descriptor = props[i];
 41 |         descriptor.enumerable = descriptor.enumerable || false;
 42 |         descriptor.configurable = true;
 43 |         if ("value" in descriptor) descriptor.writable = true;
 44 |         Object.defineProperty(target, descriptor.key, descriptor);
 45 |       }
 46 |     }
 47 | 
 48 |     return function (Constructor, protoProps, staticProps) {
 49 |       if (protoProps) defineProperties(Constructor.prototype, protoProps);
 50 |       if (staticProps) defineProperties(Constructor, staticProps);
 51 |       return Constructor;
 52 |     };
 53 |   }();
 54 | 
 55 |   /**
 56 |    * Sticky Sidebar JavaScript Plugin.
 57 |    * @version 3.3.4
 58 |    * @author Ahmed Bouhuolia <a.bouhuolia@gmail.com>
 59 |    * @license The MIT License (MIT)
 60 |    */
 61 |   var StickySidebar = function () {
 62 | 
 63 |     // ---------------------------------
 64 |     // # Define Constants
 65 |     // ---------------------------------
 66 |     //
 67 |     var EVENT_KEY = '.stickySidebar';
 68 |     var DEFAULTS = {
 69 |       /**
 70 |        * Additional top spacing of the element when it becomes sticky.
 71 |        * @type {Numeric|Function}
 72 |        */
 73 |       topSpacing: 0,
 74 | 
 75 |       /**
 76 |        * Additional bottom spacing of the element when it becomes sticky.
 77 |        * @type {Numeric|Function}
 78 |        */
 79 |       bottomSpacing: 0,
 80 | 
 81 |       /**
 82 |        * Container sidebar selector to know what the beginning and end of sticky element.
 83 |        * @type {String|False}
 84 |        */
 85 |       containerSelector: false,
 86 | 
 87 |       /**
 88 |        * Inner wrapper selector.
 89 |        * @type {String}
 90 |        */
 91 |       innerWrapperSelector: '.inner-wrapper-sticky',
 92 | 
 93 |       /**
 94 |        * The name of CSS class to apply to elements when they have become stuck.
 95 |        * @type {String|False}
 96 |        */
 97 |       stickyClass: 'is-affixed',
 98 | 
 99 |       /**
100 |        * Detect when sidebar and its container change height so re-calculate their dimensions.
101 |        * @type {Boolean}
102 |        */
103 |       resizeSensor: true,
104 | 
105 |       /**
106 |        * The sidebar returns to its normal position if its width below this value.
107 |        * @type {Numeric}
108 |        */
109 |       minWidth: false
110 |     };
111 | 
112 |     // ---------------------------------
113 |     // # Class Definition
114 |     // ---------------------------------
115 |     //
116 |     /**
117 |      * Sticky Sidebar Class.
118 |      * @public
119 |      */
120 | 
121 |     var StickySidebar = function () {
122 | 
123 |       /**
124 |        * Sticky Sidebar Constructor.
125 |        * @constructor
126 |        * @param {HTMLElement|String} sidebar - The sidebar element or sidebar selector.
127 |        * @param {Object} options - The options of sticky sidebar.
128 |        */
129 |       function StickySidebar(sidebar) {
130 |         var _this = this;
131 | 
132 |         var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
133 | 
134 |         _classCallCheck(this, StickySidebar);
135 | 
136 |         this.options = StickySidebar.extend(DEFAULTS, options);
137 | 
138 |         // Sidebar element query if there's no one, throw error.
139 |         this.sidebar = 'string' === typeof sidebar ? document.querySelector(sidebar) : sidebar;
140 |         if ('undefined' === typeof this.sidebar) throw new Error("There is no specific sidebar element.");
141 | 
142 |         this.sidebarInner = false;
143 |         this.container = this.sidebar.parentElement;
144 | 
145 |         // Current Affix Type of sidebar element.
146 |         this.affixedType = 'STATIC';
147 |         this.direction = 'down';
148 |         this.support = {
149 |           transform: false,
150 |           transform3d: false
151 |         };
152 | 
153 |         this._initialized = false;
154 |         this._reStyle = false;
155 |         this._breakpoint = false;
156 | 
157 |         // Dimensions of sidebar, container and screen viewport.
158 |         this.dimensions = {
159 |           translateY: 0,
160 |           maxTranslateY: 0,
161 |           topSpacing: 0,
162 |           lastTopSpacing: 0,
163 |           bottomSpacing: 0,
164 |           lastBottomSpacing: 0,
165 |           sidebarHeight: 0,
166 |           sidebarWidth: 0,
167 |           containerTop: 0,
168 |           containerHeight: 0,
169 |           viewportHeight: 0,
170 |           viewportTop: 0,
171 |           lastViewportTop: 0
172 |         };
173 | 
174 |         // Bind event handlers for referencability.
175 |         ['handleEvent'].forEach(function (method) {
176 |           _this[method] = _this[method].bind(_this);
177 |         });
178 | 
179 |         // Initialize sticky sidebar for first time.
180 |         this.initialize();
181 |       }
182 | 
183 |       /**
184 |        * Initializes the sticky sidebar by adding inner wrapper, define its container, 
185 |        * min-width breakpoint, calculating dimensions, adding helper classes and inline style.
186 |        * @private
187 |        */
188 | 
189 | 
190 |       _createClass(StickySidebar, [{
191 |         key: 'initialize',
192 |         value: function initialize() {
193 |           var _this2 = this;
194 | 
195 |           this._setSupportFeatures();
196 | 
197 |           // Get sticky sidebar inner wrapper, if not found, will create one.
198 |           if (this.options.innerWrapperSelector) {
199 |             this.sidebarInner = this.sidebar.querySelector(this.options.innerWrapperSelector);
200 | 
201 |             if (null === this.sidebarInner) this.sidebarInner = false;
202 |           }
203 | 
204 |           if (!this.sidebarInner) {
205 |             var wrapper = document.createElement('div');
206 |             wrapper.setAttribute('class', 'inner-wrapper-sticky');
207 |             this.sidebar.appendChild(wrapper);
208 | 
209 |             while (this.sidebar.firstChild != wrapper) {
210 |               wrapper.appendChild(this.sidebar.firstChild);
211 |             }this.sidebarInner = this.sidebar.querySelector('.inner-wrapper-sticky');
212 |           }
213 | 
214 |           // Container wrapper of the sidebar.
215 |           if (this.options.containerSelector) {
216 |             var containers = document.querySelectorAll(this.options.containerSelector);
217 |             containers = Array.prototype.slice.call(containers);
218 | 
219 |             containers.forEach(function (container, item) {
220 |               if (!container.contains(_this2.sidebar)) return;
221 |               _this2.container = container;
222 |             });
223 | 
224 |             if (!containers.length) throw new Error("The container does not contains on the sidebar.");
225 |           }
226 | 
227 |           // If top/bottom spacing is not function parse value to integer.
228 |           if ('function' !== typeof this.options.topSpacing) this.options.topSpacing = parseInt(this.options.topSpacing) || 0;
229 | 
230 |           if ('function' !== typeof this.options.bottomSpacing) this.options.bottomSpacing = parseInt(this.options.bottomSpacing) || 0;
231 | 
232 |           // Breakdown sticky sidebar if screen width below `options.minWidth`.
233 |           this._widthBreakpoint();
234 | 
235 |           // Calculate dimensions of sidebar, container and viewport.
236 |           this.calcDimensions();
237 | 
238 |           // Affix sidebar in proper position.
239 |           this.stickyPosition();
240 | 
241 |           // Bind all events.
242 |           this.bindEvents();
243 | 
244 |           // Inform other properties the sticky sidebar is initialized.
245 |           this._initialized = true;
246 |         }
247 |       }, {
248 |         key: 'bindEvents',
249 |         value: function bindEvents() {
250 |           window.addEventListener('resize', this, { passive: true, capture: false });
251 |           window.addEventListener('scroll', this, { passive: true, capture: false });
252 | 
253 |           this.sidebar.addEventListener('update' + EVENT_KEY, this);
254 | 
255 |           if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) {
256 |             new ResizeSensor(this.sidebarInner, this.handleEvent);
257 |             new ResizeSensor(this.container, this.handleEvent);
258 |           }
259 |         }
260 |       }, {
261 |         key: 'handleEvent',
262 |         value: function handleEvent(event) {
263 |           this.updateSticky(event);
264 |         }
265 |       }, {
266 |         key: 'calcDimensions',
267 |         value: function calcDimensions() {
268 |           if (this._breakpoint) return;
269 |           var dims = this.dimensions;
270 | 
271 |           // Container of sticky sidebar dimensions.
272 |           dims.containerTop = StickySidebar.offsetRelative(this.container).top;
273 |           dims.containerHeight = this.container.clientHeight;
274 |           dims.containerBottom = dims.containerTop + dims.containerHeight;
275 | 
276 |           // Sidebar dimensions.
277 |           dims.sidebarHeight = this.sidebarInner.offsetHeight;
278 |           dims.sidebarWidth = this.sidebarInner.offsetWidth;
279 | 
280 |           // Screen viewport dimensions.
281 |           dims.viewportHeight = window.innerHeight;
282 | 
283 |           // Maximum sidebar translate Y.
284 |           dims.maxTranslateY = dims.containerHeight - dims.sidebarHeight;
285 | 
286 |           this._calcDimensionsWithScroll();
287 |         }
288 |       }, {
289 |         key: '_calcDimensionsWithScroll',
290 |         value: function _calcDimensionsWithScroll() {
291 |           var dims = this.dimensions;
292 | 
293 |           dims.sidebarLeft = StickySidebar.offsetRelative(this.sidebar).left;
294 | 
295 |           dims.viewportTop = document.documentElement.scrollTop || document.body.scrollTop;
296 |           dims.viewportBottom = dims.viewportTop + dims.viewportHeight;
297 |           dims.viewportLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
298 | 
299 |           dims.topSpacing = this.options.topSpacing;
300 |           dims.bottomSpacing = this.options.bottomSpacing;
301 | 
302 |           if ('function' === typeof dims.topSpacing) dims.topSpacing = parseInt(dims.topSpacing(this.sidebar)) || 0;
303 | 
304 |           if ('function' === typeof dims.bottomSpacing) dims.bottomSpacing = parseInt(dims.bottomSpacing(this.sidebar)) || 0;
305 | 
306 |           if ('VIEWPORT-TOP' === this.affixedType) {
307 |             // Adjust translate Y in the case decrease top spacing value.
308 |             if (dims.topSpacing < dims.lastTopSpacing) {
309 |               dims.translateY += dims.lastTopSpacing - dims.topSpacing;
310 |               this._reStyle = true;
311 |             }
312 |           } else if ('VIEWPORT-BOTTOM' === this.affixedType) {
313 |             // Adjust translate Y in the case decrease bottom spacing value.
314 |             if (dims.bottomSpacing < dims.lastBottomSpacing) {
315 |               dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing;
316 |               this._reStyle = true;
317 |             }
318 |           }
319 | 
320 |           dims.lastTopSpacing = dims.topSpacing;
321 |           dims.lastBottomSpacing = dims.bottomSpacing;
322 |         }
323 |       }, {
324 |         key: 'isSidebarFitsViewport',
325 |         value: function isSidebarFitsViewport() {
326 |           var dims = this.dimensions;
327 |           var offset = this.scrollDirection === 'down' ? dims.lastBottomSpacing : dims.lastTopSpacing;
328 |           return this.dimensions.sidebarHeight + offset < this.dimensions.viewportHeight;
329 |         }
330 |       }, {
331 |         key: 'observeScrollDir',
332 |         value: function observeScrollDir() {
333 |           var dims = this.dimensions;
334 |           if (dims.lastViewportTop === dims.viewportTop) return;
335 | 
336 |           var furthest = 'down' === this.direction ? Math.min : Math.max;
337 | 
338 |           // If the browser is scrolling not in the same direction.
339 |           if (dims.viewportTop === furthest(dims.viewportTop, dims.lastViewportTop)) this.direction = 'down' === this.direction ? 'up' : 'down';
340 |         }
341 |       }, {
342 |         key: 'getAffixType',
343 |         value: function getAffixType() {
344 |           this._calcDimensionsWithScroll();
345 |           var dims = this.dimensions;
346 |           var colliderTop = dims.viewportTop + dims.topSpacing;
347 |           var affixType = this.affixedType;
348 | 
349 |           if (colliderTop <= dims.containerTop || dims.containerHeight <= dims.sidebarHeight) {
350 |             dims.translateY = 0;
351 |             affixType = 'STATIC';
352 |           } else {
353 |             affixType = 'up' === this.direction ? this._getAffixTypeScrollingUp() : this._getAffixTypeScrollingDown();
354 |           }
355 | 
356 |           // Make sure the translate Y is not bigger than container height.
357 |           dims.translateY = Math.max(0, dims.translateY);
358 |           dims.translateY = Math.min(dims.containerHeight, dims.translateY);
359 |           dims.translateY = Math.round(dims.translateY);
360 | 
361 |           dims.lastViewportTop = dims.viewportTop;
362 |           return affixType;
363 |         }
364 |       }, {
365 |         key: '_getAffixTypeScrollingDown',
366 |         value: function _getAffixTypeScrollingDown() {
367 |           var dims = this.dimensions;
368 |           var sidebarBottom = dims.sidebarHeight + dims.containerTop;
369 |           var colliderTop = dims.viewportTop + dims.topSpacing;
370 |           var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
371 |           var affixType = this.affixedType;
372 | 
373 |           if (this.isSidebarFitsViewport()) {
374 |             if (dims.sidebarHeight + colliderTop >= dims.containerBottom) {
375 |               dims.translateY = dims.containerBottom - sidebarBottom;
376 |               affixType = 'CONTAINER-BOTTOM';
377 |             } else if (colliderTop >= dims.containerTop) {
378 |               dims.translateY = colliderTop - dims.containerTop;
379 |               affixType = 'VIEWPORT-TOP';
380 |             }
381 |           } else {
382 |             if (dims.containerBottom <= colliderBottom) {
383 |               dims.translateY = dims.containerBottom - sidebarBottom;
384 |               affixType = 'CONTAINER-BOTTOM';
385 |             } else if (sidebarBottom + dims.translateY <= colliderBottom) {
386 |               dims.translateY = colliderBottom - sidebarBottom;
387 |               affixType = 'VIEWPORT-BOTTOM';
388 |             } else if (dims.containerTop + dims.translateY <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) {
389 |               affixType = 'VIEWPORT-UNBOTTOM';
390 |             }
391 |           }
392 | 
393 |           return affixType;
394 |         }
395 |       }, {
396 |         key: '_getAffixTypeScrollingUp',
397 |         value: function _getAffixTypeScrollingUp() {
398 |           var dims = this.dimensions;
399 |           var sidebarBottom = dims.sidebarHeight + dims.containerTop;
400 |           var colliderTop = dims.viewportTop + dims.topSpacing;
401 |           var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
402 |           var affixType = this.affixedType;
403 | 
404 |           if (colliderTop <= dims.translateY + dims.containerTop) {
405 |             dims.translateY = colliderTop - dims.containerTop;
406 |             affixType = 'VIEWPORT-TOP';
407 |           } else if (dims.containerBottom <= colliderBottom) {
408 |             dims.translateY = dims.containerBottom - sidebarBottom;
409 |             affixType = 'CONTAINER-BOTTOM';
410 |           } else if (!this.isSidebarFitsViewport()) {
411 | 
412 |             if (dims.containerTop <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) {
413 |               affixType = 'VIEWPORT-UNBOTTOM';
414 |             }
415 |           }
416 | 
417 |           return affixType;
418 |         }
419 |       }, {
420 |         key: '_getStyle',
421 |         value: function _getStyle(affixType) {
422 |           if ('undefined' === typeof affixType) return;
423 | 
424 |           var style = { inner: {}, outer: {} };
425 |           var dims = this.dimensions;
426 | 
427 |           switch (affixType) {
428 |             case 'VIEWPORT-TOP':
429 |               style.inner = { position: 'fixed', top: dims.topSpacing,
430 |                 left: dims.sidebarLeft - dims.viewportLeft, width: dims.sidebarWidth };
431 |               break;
432 |             case 'VIEWPORT-BOTTOM':
433 |               style.inner = { position: 'fixed', top: 'auto', left: dims.sidebarLeft,
434 |                 bottom: dims.bottomSpacing, width: dims.sidebarWidth };
435 |               break;
436 |             case 'CONTAINER-BOTTOM':
437 |             case 'VIEWPORT-UNBOTTOM':
438 |               var translate = this._getTranslate(0, dims.translateY + 'px');
439 | 
440 |               if (translate) style.inner = { transform: translate };else style.inner = { position: 'absolute', top: dims.translateY, width: dims.sidebarWidth };
441 |               break;
442 |           }
443 | 
444 |           switch (affixType) {
445 |             case 'VIEWPORT-TOP':
446 |             case 'VIEWPORT-BOTTOM':
447 |             case 'VIEWPORT-UNBOTTOM':
448 |             case 'CONTAINER-BOTTOM':
449 |               style.outer = { height: dims.sidebarHeight, position: 'relative' };
450 |               break;
451 |           }
452 | 
453 |           style.outer = StickySidebar.extend({ height: '', position: '' }, style.outer);
454 |           style.inner = StickySidebar.extend({ position: 'relative', top: '', left: '',
455 |             bottom: '', width: '', transform: '' }, style.inner);
456 | 
457 |           return style;
458 |         }
459 |       }, {
460 |         key: 'stickyPosition',
461 |         value: function stickyPosition(force) {
462 |           if (this._breakpoint) return;
463 | 
464 |           force = this._reStyle || force || false;
465 | 
466 |           var offsetTop = this.options.topSpacing;
467 |           var offsetBottom = this.options.bottomSpacing;
468 | 
469 |           var affixType = this.getAffixType();
470 |           var style = this._getStyle(affixType);
471 | 
472 |           if ((this.affixedType != affixType || force) && affixType) {
473 |             var affixEvent = 'affix.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
474 |             StickySidebar.eventTrigger(this.sidebar, affixEvent);
475 | 
476 |             if ('STATIC' === affixType) StickySidebar.removeClass(this.sidebar, this.options.stickyClass);else StickySidebar.addClass(this.sidebar, this.options.stickyClass);
477 | 
478 |             for (var key in style.outer) {
479 |               var unit = 'number' === typeof style.outer[key] ? 'px' : '';
480 |               this.sidebar.style[key] = style.outer[key] + unit;
481 |             }
482 | 
483 |             for (var _key in style.inner) {
484 |               var _unit = 'number' === typeof style.inner[_key] ? 'px' : '';
485 |               this.sidebarInner.style[_key] = style.inner[_key] + _unit;
486 |             }
487 | 
488 |             var affixedEvent = 'affixed.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
489 |             StickySidebar.eventTrigger(this.sidebar, affixedEvent);
490 |           } else {
491 |             if (this._initialized) this.sidebarInner.style.left = style.inner.left;
492 |           }
493 | 
494 |           this.affixedType = affixType;
495 |         }
496 |       }, {
497 |         key: '_widthBreakpoint',
498 |         value: function _widthBreakpoint() {
499 | 
500 |           if (window.innerWidth <= this.options.minWidth) {
501 |             this._breakpoint = true;
502 |             this.affixedType = 'STATIC';
503 | 
504 |             this.sidebar.removeAttribute('style');
505 |             StickySidebar.removeClass(this.sidebar, this.options.stickyClass);
506 |             this.sidebarInner.removeAttribute('style');
507 |           } else {
508 |             this._breakpoint = false;
509 |           }
510 |         }
511 |       }, {
512 |         key: 'updateSticky',
513 |         value: function updateSticky() {
514 |           var _this3 = this;
515 | 
516 |           var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
517 | 
518 |           if (this._running) return;
519 |           this._running = true;
520 | 
521 |           (function (eventType) {
522 |             requestAnimationFrame(function () {
523 |               switch (eventType) {
524 |                 // When browser is scrolling and re-calculate just dimensions
525 |                 // within scroll. 
526 |                 case 'scroll':
527 |                   _this3._calcDimensionsWithScroll();
528 |                   _this3.observeScrollDir();
529 |                   _this3.stickyPosition();
530 |                   break;
531 | 
532 |                 // When browser is resizing or there's no event, observe width
533 |                 // breakpoint and re-calculate dimensions.
534 |                 case 'resize':
535 |                 default:
536 |                   _this3._widthBreakpoint();
537 |                   _this3.calcDimensions();
538 |                   _this3.stickyPosition(true);
539 |                   break;
540 |               }
541 |               _this3._running = false;
542 |             });
543 |           })(event.type);
544 |         }
545 |       }, {
546 |         key: '_setSupportFeatures',
547 |         value: function _setSupportFeatures() {
548 |           var support = this.support;
549 | 
550 |           support.transform = StickySidebar.supportTransform();
551 |           support.transform3d = StickySidebar.supportTransform(true);
552 |         }
553 |       }, {
554 |         key: '_getTranslate',
555 |         value: function _getTranslate() {
556 |           var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
557 |           var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
558 |           var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
559 | 
560 |           if (this.support.transform3d) return 'translate3d(' + y + ', ' + x + ', ' + z + ')';else if (this.support.translate) return 'translate(' + y + ', ' + x + ')';else return false;
561 |         }
562 |       }, {
563 |         key: 'destroy',
564 |         value: function destroy() {
565 |           window.removeEventListener('resize', this, { capture: false });
566 |           window.removeEventListener('scroll', this, { capture: false });
567 | 
568 |           this.sidebar.classList.remove(this.options.stickyClass);
569 |           this.sidebar.style.minHeight = '';
570 | 
571 |           this.sidebar.removeEventListener('update' + EVENT_KEY, this);
572 | 
573 |           var styleReset = { inner: {}, outer: {} };
574 | 
575 |           styleReset.inner = { position: '', top: '', left: '', bottom: '', width: '', transform: '' };
576 |           styleReset.outer = { height: '', position: '' };
577 | 
578 |           for (var key in styleReset.outer) {
579 |             this.sidebar.style[key] = styleReset.outer[key];
580 |           }for (var _key2 in styleReset.inner) {
581 |             this.sidebarInner.style[_key2] = styleReset.inner[_key2];
582 |           }if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) {
583 |             ResizeSensor.detach(this.sidebarInner, this.handleEvent);
584 |             ResizeSensor.detach(this.container, this.handleEvent);
585 |           }
586 |         }
587 |       }], [{
588 |         key: 'supportTransform',
589 |         value: function supportTransform(transform3d) {
590 |           var result = false,
591 |               property = transform3d ? 'perspective' : 'transform',
592 |               upper = property.charAt(0).toUpperCase() + property.slice(1),
593 |               prefixes = ['Webkit', 'Moz', 'O', 'ms'],
594 |               support = document.createElement('support'),
595 |               style = support.style;
596 | 
597 |           (property + ' ' + prefixes.join(upper + ' ') + upper).split(' ').forEach(function (property, i) {
598 |             if (style[property] !== undefined) {
599 |               result = property;
600 |               return false;
601 |             }
602 |           });
603 |           return result;
604 |         }
605 |       }, {
606 |         key: 'eventTrigger',
607 |         value: function eventTrigger(element, eventName, data) {
608 |           try {
609 |             var event = new CustomEvent(eventName, { detail: data });
610 |           } catch (e) {
611 |             var event = document.createEvent('CustomEvent');
612 |             event.initCustomEvent(eventName, true, true, data);
613 |           }
614 |           element.dispatchEvent(event);
615 |         }
616 |       }, {
617 |         key: 'extend',
618 |         value: function extend(defaults, options) {
619 |           var results = {};
620 |           for (var key in defaults) {
621 |             if ('undefined' !== typeof options[key]) results[key] = options[key];else results[key] = defaults[key];
622 |           }
623 |           return results;
624 |         }
625 |       }, {
626 |         key: 'offsetRelative',
627 |         value: function offsetRelative(element) {
628 |           var result = { left: 0, top: 0 };
629 | 
630 |           do {
631 |             var offsetTop = element.offsetTop;
632 |             var offsetLeft = element.offsetLeft;
633 | 
634 |             if (!isNaN(offsetTop)) result.top += offsetTop;
635 | 
636 |             if (!isNaN(offsetLeft)) result.left += offsetLeft;
637 | 
638 |             element = 'BODY' === element.tagName ? element.parentElement : element.offsetParent;
639 |           } while (element);
640 |           return result;
641 |         }
642 |       }, {
643 |         key: 'addClass',
644 |         value: function addClass(element, className) {
645 |           if (!StickySidebar.hasClass(element, className)) {
646 |             if (element.classList) element.classList.add(className);else element.className += ' ' + className;
647 |           }
648 |         }
649 |       }, {
650 |         key: 'removeClass',
651 |         value: function removeClass(element, className) {
652 |           if (StickySidebar.hasClass(element, className)) {
653 |             if (element.classList) element.classList.remove(className);else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
654 |           }
655 |         }
656 |       }, {
657 |         key: 'hasClass',
658 |         value: function hasClass(element, className) {
659 |           if (element.classList) return element.classList.contains(className);else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
660 |         }
661 |       }, {
662 |         key: 'defaults',
663 |         get: function () {
664 |           return DEFAULTS;
665 |         }
666 |       }]);
667 | 
668 |       return StickySidebar;
669 |     }();
670 | 
671 |     return StickySidebar;
672 |   }();
673 | 
674 |   exports.default = StickySidebar;
675 | 
676 | 
677 |   // Global
678 |   // -------------------------
679 |   window.StickySidebar = StickySidebar;
680 | });
681 | });
682 | 
683 | unwrapExports(stickySidebar);
684 | 
685 | var jquery_stickySidebar = createCommonjsModule(function (module, exports) {
686 | (function (global, factory) {
687 |   if (typeof undefined === "function" && undefined.amd) {
688 |     undefined(['./sticky-sidebar'], factory);
689 |   } else {
690 |     factory(stickySidebar);
691 |   }
692 | })(commonjsGlobal, function (_stickySidebar) {
693 |   var _stickySidebar2 = _interopRequireDefault(_stickySidebar);
694 | 
695 |   function _interopRequireDefault(obj) {
696 |     return obj && obj.__esModule ? obj : {
697 |       default: obj
698 |     };
699 |   }
700 | 
701 |   (function () {
702 |     if ('undefined' === typeof window) return;
703 | 
704 |     var plugin = window.$ || window.jQuery || window.Zepto;
705 |     var DATA_NAMESPACE = 'stickySidebar';
706 | 
707 |     // Make sure the site has jquery or zepto plugin.
708 |     if (plugin) {
709 |       var _jQueryPlugin = function (config) {
710 |         return this.each(function () {
711 |           var $this = plugin(this),
712 |               data = plugin(this).data(DATA_NAMESPACE);
713 | 
714 |           if (!data) {
715 |             data = new _stickySidebar2.default(this, typeof config == 'object' && config);
716 |             $this.data(DATA_NAMESPACE, data);
717 |           }
718 | 
719 |           if ('string' === typeof config) {
720 |             if (data[config] === undefined && ['destroy', 'updateSticky'].indexOf(config) === -1) throw new Error('No method named "' + config + '"');
721 | 
722 |             data[config]();
723 |           }
724 |         });
725 |       };
726 | 
727 |       plugin.fn.stickySidebar = _jQueryPlugin;
728 |       plugin.fn.stickySidebar.Constructor = _stickySidebar2.default;
729 | 
730 |       var old = plugin.fn.stickySidebar;
731 | 
732 |       /**
733 |        * Sticky Sidebar No Conflict.
734 |        */
735 |       plugin.fn.stickySidebar.noConflict = function () {
736 |         plugin.fn.stickySidebar = old;
737 |         return this;
738 |       };
739 |     }
740 |   })();
741 | });
742 | });
743 | 
744 | var jquery_stickySidebar$1 = unwrapExports(jquery_stickySidebar);
745 | 
746 | return jquery_stickySidebar$1;
747 | 
748 | })));
749 | 
750 | //# sourceMappingURL=jquery.sticky-sidebar.js.map
751 | 


--------------------------------------------------------------------------------
/dist/jquery.sticky-sidebar.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"jquery.sticky-sidebar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}


--------------------------------------------------------------------------------
/dist/jquery.sticky-sidebar.min.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * sticky-sidebar - A JavaScript plugin for making smart and high performance.
3 |  * @version v3.3.1
4 |  * @link https://github.com/abouolia/sticky-sidebar
5 |  * @author Ahmed Bouhuolia
6 |  * @license The MIT License (MIT)
7 | **/
8 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.StickySidebar=e()}(this,function(){"use strict";"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function t(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}function e(t,e){return t(e={exports:{}},e.exports),e.exports}var i=e(function(t,e){(function(t){Object.defineProperty(t,"__esModule",{value:!0});var l,n,e=function(){function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(t,e,i){return e&&n(t.prototype,e),i&&n(t,i),t}}(),i=(l=".stickySidebar",n={topSpacing:0,bottomSpacing:0,containerSelector:!1,innerWrapperSelector:".inner-wrapper-sticky",stickyClass:"is-affixed",resizeSensor:!0,minWidth:!1},function(){function c(t){var e=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,c),this.options=c.extend(n,i),this.sidebar="string"==typeof t?document.querySelector(t):t,void 0===this.sidebar)throw new Error("There is no specific sidebar element.");this.sidebarInner=!1,this.container=this.sidebar.parentElement,this.affixedType="STATIC",this.direction="down",this.support={transform:!1,transform3d:!1},this._initialized=!1,this._reStyle=!1,this._breakpoint=!1,this.dimensions={translateY:0,maxTranslateY:0,topSpacing:0,lastTopSpacing:0,bottomSpacing:0,lastBottomSpacing:0,sidebarHeight:0,sidebarWidth:0,containerTop:0,containerHeight:0,viewportHeight:0,viewportTop:0,lastViewportTop:0},["handleEvent"].forEach(function(t){e[t]=e[t].bind(e)}),this.initialize()}return e(c,[{key:"initialize",value:function(){var i=this;if(this._setSupportFeatures(),this.options.innerWrapperSelector&&(this.sidebarInner=this.sidebar.querySelector(this.options.innerWrapperSelector),null===this.sidebarInner&&(this.sidebarInner=!1)),!this.sidebarInner){var t=document.createElement("div");for(t.setAttribute("class","inner-wrapper-sticky"),this.sidebar.appendChild(t);this.sidebar.firstChild!=t;)t.appendChild(this.sidebar.firstChild);this.sidebarInner=this.sidebar.querySelector(".inner-wrapper-sticky")}if(this.options.containerSelector){var e=document.querySelectorAll(this.options.containerSelector);if((e=Array.prototype.slice.call(e)).forEach(function(t,e){t.contains(i.sidebar)&&(i.container=t)}),!e.length)throw new Error("The container does not contains on the sidebar.")}"function"!=typeof this.options.topSpacing&&(this.options.topSpacing=parseInt(this.options.topSpacing)||0),"function"!=typeof this.options.bottomSpacing&&(this.options.bottomSpacing=parseInt(this.options.bottomSpacing)||0),this._widthBreakpoint(),this.calcDimensions(),this.stickyPosition(),this.bindEvents(),this._initialized=!0}},{key:"bindEvents",value:function(){window.addEventListener("resize",this,{passive:!0,capture:!1}),window.addEventListener("scroll",this,{passive:!0,capture:!1}),this.sidebar.addEventListener("update"+l,this),this.options.resizeSensor&&"undefined"!=typeof ResizeSensor&&(new ResizeSensor(this.sidebarInner,this.handleEvent),new ResizeSensor(this.container,this.handleEvent))}},{key:"handleEvent",value:function(t){this.updateSticky(t)}},{key:"calcDimensions",value:function(){if(!this._breakpoint){var t=this.dimensions;t.containerTop=c.offsetRelative(this.container).top,t.containerHeight=this.container.clientHeight,t.containerBottom=t.containerTop+t.containerHeight,t.sidebarHeight=this.sidebarInner.offsetHeight,t.sidebarWidth=this.sidebarInner.offsetWidth,t.viewportHeight=window.innerHeight,t.maxTranslateY=t.containerHeight-t.sidebarHeight,this._calcDimensionsWithScroll()}}},{key:"_calcDimensionsWithScroll",value:function(){var t=this.dimensions;t.sidebarLeft=c.offsetRelative(this.sidebar).left,t.viewportTop=document.documentElement.scrollTop||document.body.scrollTop,t.viewportBottom=t.viewportTop+t.viewportHeight,t.viewportLeft=document.documentElement.scrollLeft||document.body.scrollLeft,t.topSpacing=this.options.topSpacing,t.bottomSpacing=this.options.bottomSpacing,"function"==typeof t.topSpacing&&(t.topSpacing=parseInt(t.topSpacing(this.sidebar))||0),"function"==typeof t.bottomSpacing&&(t.bottomSpacing=parseInt(t.bottomSpacing(this.sidebar))||0),"VIEWPORT-TOP"===this.affixedType?t.topSpacing<t.lastTopSpacing&&(t.translateY+=t.lastTopSpacing-t.topSpacing,this._reStyle=!0):"VIEWPORT-BOTTOM"===this.affixedType&&t.bottomSpacing<t.lastBottomSpacing&&(t.translateY+=t.lastBottomSpacing-t.bottomSpacing,this._reStyle=!0),t.lastTopSpacing=t.topSpacing,t.lastBottomSpacing=t.bottomSpacing}},{key:"isSidebarFitsViewport",value:function(){var t=this.dimensions,e="down"===this.scrollDirection?t.lastBottomSpacing:t.lastTopSpacing;return this.dimensions.sidebarHeight+e<this.dimensions.viewportHeight}},{key:"observeScrollDir",value:function(){var t=this.dimensions;if(t.lastViewportTop!==t.viewportTop){var e="down"===this.direction?Math.min:Math.max;t.viewportTop===e(t.viewportTop,t.lastViewportTop)&&(this.direction="down"===this.direction?"up":"down")}}},{key:"getAffixType",value:function(){this._calcDimensionsWithScroll();var t=this.dimensions,e=t.viewportTop+t.topSpacing,i=this.affixedType;return e<=t.containerTop||t.containerHeight<=t.sidebarHeight?(t.translateY=0,i="STATIC"):i="up"===this.direction?this._getAffixTypeScrollingUp():this._getAffixTypeScrollingDown(),t.translateY=Math.max(0,t.translateY),t.translateY=Math.min(t.containerHeight,t.translateY),t.translateY=Math.round(t.translateY),t.lastViewportTop=t.viewportTop,i}},{key:"_getAffixTypeScrollingDown",value:function(){var t=this.dimensions,e=t.sidebarHeight+t.containerTop,i=t.viewportTop+t.topSpacing,n=t.viewportBottom-t.bottomSpacing,o=this.affixedType;return this.isSidebarFitsViewport()?t.sidebarHeight+i>=t.containerBottom?(t.translateY=t.containerBottom-e,o="CONTAINER-BOTTOM"):i>=t.containerTop&&(t.translateY=i-t.containerTop,o="VIEWPORT-TOP"):t.containerBottom<=n?(t.translateY=t.containerBottom-e,o="CONTAINER-BOTTOM"):e+t.translateY<=n?(t.translateY=n-e,o="VIEWPORT-BOTTOM"):t.containerTop+t.translateY<=i&&0!==t.translateY&&t.maxTranslateY!==t.translateY&&(o="VIEWPORT-UNBOTTOM"),o}},{key:"_getAffixTypeScrollingUp",value:function(){var t=this.dimensions,e=t.sidebarHeight+t.containerTop,i=t.viewportTop+t.topSpacing,n=t.viewportBottom-t.bottomSpacing,o=this.affixedType;return i<=t.translateY+t.containerTop?(t.translateY=i-t.containerTop,o="VIEWPORT-TOP"):t.containerBottom<=n?(t.translateY=t.containerBottom-e,o="CONTAINER-BOTTOM"):this.isSidebarFitsViewport()||t.containerTop<=i&&0!==t.translateY&&t.maxTranslateY!==t.translateY&&(o="VIEWPORT-UNBOTTOM"),o}},{key:"_getStyle",value:function(t){if(void 0!==t){var e={inner:{},outer:{}},i=this.dimensions;switch(t){case"VIEWPORT-TOP":e.inner={position:"fixed",top:i.topSpacing,left:i.sidebarLeft-i.viewportLeft,width:i.sidebarWidth};break;case"VIEWPORT-BOTTOM":e.inner={position:"fixed",top:"auto",left:i.sidebarLeft,bottom:i.bottomSpacing,width:i.sidebarWidth};break;case"CONTAINER-BOTTOM":case"VIEWPORT-UNBOTTOM":var n=this._getTranslate(0,i.translateY+"px");e.inner=n?{transform:n}:{position:"absolute",top:i.translateY,width:i.sidebarWidth}}switch(t){case"VIEWPORT-TOP":case"VIEWPORT-BOTTOM":case"VIEWPORT-UNBOTTOM":case"CONTAINER-BOTTOM":e.outer={height:i.sidebarHeight,position:"relative"}}return e.outer=c.extend({height:"",position:""},e.outer),e.inner=c.extend({position:"relative",top:"",left:"",bottom:"",width:"",transform:""},e.inner),e}}},{key:"stickyPosition",value:function(t){if(!this._breakpoint){t=this._reStyle||t||!1,this.options.topSpacing,this.options.bottomSpacing;var e=this.getAffixType(),i=this._getStyle(e);if((this.affixedType!=e||t)&&e){var n="affix."+e.toLowerCase().replace("viewport-","")+l;for(var o in c.eventTrigger(this.sidebar,n),"STATIC"===e?c.removeClass(this.sidebar,this.options.stickyClass):c.addClass(this.sidebar,this.options.stickyClass),i.outer){var s="number"==typeof i.outer[o]?"px":"";this.sidebar.style[o]=i.outer[o]+s}for(var r in i.inner){var a="number"==typeof i.inner[r]?"px":"";this.sidebarInner.style[r]=i.inner[r]+a}var p="affixed."+e.toLowerCase().replace("viewport-","")+l;c.eventTrigger(this.sidebar,p)}else this._initialized&&(this.sidebarInner.style.left=i.inner.left);this.affixedType=e}}},{key:"_widthBreakpoint",value:function(){window.innerWidth<=this.options.minWidth?(this._breakpoint=!0,this.affixedType="STATIC",this.sidebar.removeAttribute("style"),c.removeClass(this.sidebar,this.options.stickyClass),this.sidebarInner.removeAttribute("style")):this._breakpoint=!1}},{key:"updateSticky",value:function(){var t,e=this,i=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this._running||(this._running=!0,t=i.type,requestAnimationFrame(function(){switch(t){case"scroll":e._calcDimensionsWithScroll(),e.observeScrollDir(),e.stickyPosition();break;case"resize":default:e._widthBreakpoint(),e.calcDimensions(),e.stickyPosition(!0)}e._running=!1}))}},{key:"_setSupportFeatures",value:function(){var t=this.support;t.transform=c.supportTransform(),t.transform3d=c.supportTransform(!0)}},{key:"_getTranslate",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0,e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0,i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:0;return this.support.transform3d?"translate3d("+t+", "+e+", "+i+")":!!this.support.translate&&"translate("+t+", "+e+")"}},{key:"destroy",value:function(){window.removeEventListener("resize",this,{capture:!1}),window.removeEventListener("scroll",this,{capture:!1}),this.sidebar.classList.remove(this.options.stickyClass),this.sidebar.style.minHeight="",this.sidebar.removeEventListener("update"+l,this);var t={inner:{},outer:{}};for(var e in t.inner={position:"",top:"",left:"",bottom:"",width:"",transform:""},t.outer={height:"",position:""},t.outer)this.sidebar.style[e]=t.outer[e];for(var i in t.inner)this.sidebarInner.style[i]=t.inner[i];this.options.resizeSensor&&"undefined"!=typeof ResizeSensor&&(ResizeSensor.detach(this.sidebarInner,this.handleEvent),ResizeSensor.detach(this.container,this.handleEvent))}}],[{key:"supportTransform",value:function(t){var i=!1,e=t?"perspective":"transform",n=e.charAt(0).toUpperCase()+e.slice(1),o=document.createElement("support").style;return(e+" "+["Webkit","Moz","O","ms"].join(n+" ")+n).split(" ").forEach(function(t,e){if(void 0!==o[t])return i=t,!1}),i}},{key:"eventTrigger",value:function(t,e,i){try{var n=new CustomEvent(e,{detail:i})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i)}t.dispatchEvent(n)}},{key:"extend",value:function(t,e){var i={};for(var n in t)void 0!==e[n]?i[n]=e[n]:i[n]=t[n];return i}},{key:"offsetRelative",value:function(t){var e={left:0,top:0};do{var i=t.offsetTop,n=t.offsetLeft;isNaN(i)||(e.top+=i),isNaN(n)||(e.left+=n),t="BODY"===t.tagName?t.parentElement:t.offsetParent}while(t);return e}},{key:"addClass",value:function(t,e){c.hasClass(t,e)||(t.classList?t.classList.add(e):t.className+=" "+e)}},{key:"removeClass",value:function(t,e){c.hasClass(t,e)&&(t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," "))}},{key:"hasClass",value:function(t,e){return t.classList?t.classList.contains(e):new RegExp("(^| )"+e+"( |$)","gi").test(t.className)}},{key:"defaults",get:function(){return n}}]),c}());t.default=i,window.StickySidebar=i})(e)});return t(i),t(e(function(t,e){(function(t){var e,s=(e=t)&&e.__esModule?e:{default:e};!function(){if("undefined"!=typeof window){var n=window.$||window.jQuery||window.Zepto,o="stickySidebar";if(n){n.fn.stickySidebar=function(i){return this.each(function(){var t=n(this),e=n(this).data(o);if(e||(e=new s.default(this,"object"==typeof i&&i),t.data(o,e)),"string"==typeof i){if(void 0===e[i]&&-1===["destroy","updateSticky"].indexOf(i))throw new Error('No method named "'+i+'"');e[i]()}})},n.fn.stickySidebar.Constructor=s.default;var t=n.fn.stickySidebar;n.fn.stickySidebar.noConflict=function(){return n.fn.stickySidebar=t,this}}}}()})(i)}))});


--------------------------------------------------------------------------------
/dist/sticky-sidebar.js:
--------------------------------------------------------------------------------
  1 | (function (global, factory) {
  2 | 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  3 | 	typeof define === 'function' && define.amd ? define(['exports'], factory) :
  4 | 	(factory((global.StickySidebar = {})));
  5 | }(this, (function (exports) { 'use strict';
  6 | 
  7 | var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
  8 | 
  9 | 
 10 | 
 11 | function unwrapExports (x) {
 12 | 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 13 | }
 14 | 
 15 | function createCommonjsModule(fn, module) {
 16 | 	return module = { exports: {} }, fn(module, module.exports), module.exports;
 17 | }
 18 | 
 19 | var stickySidebar = createCommonjsModule(function (module, exports) {
 20 | (function (global, factory) {
 21 |   if (typeof undefined === "function" && undefined.amd) {
 22 |     undefined(['exports'], factory);
 23 |   } else {
 24 |     factory(exports);
 25 |   }
 26 | })(commonjsGlobal, function (exports) {
 27 |   Object.defineProperty(exports, "__esModule", {
 28 |     value: true
 29 |   });
 30 | 
 31 |   function _classCallCheck(instance, Constructor) {
 32 |     if (!(instance instanceof Constructor)) {
 33 |       throw new TypeError("Cannot call a class as a function");
 34 |     }
 35 |   }
 36 | 
 37 |   var _createClass = function () {
 38 |     function defineProperties(target, props) {
 39 |       for (var i = 0; i < props.length; i++) {
 40 |         var descriptor = props[i];
 41 |         descriptor.enumerable = descriptor.enumerable || false;
 42 |         descriptor.configurable = true;
 43 |         if ("value" in descriptor) descriptor.writable = true;
 44 |         Object.defineProperty(target, descriptor.key, descriptor);
 45 |       }
 46 |     }
 47 | 
 48 |     return function (Constructor, protoProps, staticProps) {
 49 |       if (protoProps) defineProperties(Constructor.prototype, protoProps);
 50 |       if (staticProps) defineProperties(Constructor, staticProps);
 51 |       return Constructor;
 52 |     };
 53 |   }();
 54 | 
 55 |   /**
 56 |    * Sticky Sidebar JavaScript Plugin.
 57 |    * @version 3.3.4
 58 |    * @author Ahmed Bouhuolia <a.bouhuolia@gmail.com>
 59 |    * @license The MIT License (MIT)
 60 |    */
 61 |   var StickySidebar = function () {
 62 | 
 63 |     // ---------------------------------
 64 |     // # Define Constants
 65 |     // ---------------------------------
 66 |     //
 67 |     var EVENT_KEY = '.stickySidebar';
 68 |     var DEFAULTS = {
 69 |       /**
 70 |        * Additional top spacing of the element when it becomes sticky.
 71 |        * @type {Numeric|Function}
 72 |        */
 73 |       topSpacing: 0,
 74 | 
 75 |       /**
 76 |        * Additional bottom spacing of the element when it becomes sticky.
 77 |        * @type {Numeric|Function}
 78 |        */
 79 |       bottomSpacing: 0,
 80 | 
 81 |       /**
 82 |        * Container sidebar selector to know what the beginning and end of sticky element.
 83 |        * @type {String|False}
 84 |        */
 85 |       containerSelector: false,
 86 | 
 87 |       /**
 88 |        * Inner wrapper selector.
 89 |        * @type {String}
 90 |        */
 91 |       innerWrapperSelector: '.inner-wrapper-sticky',
 92 | 
 93 |       /**
 94 |        * The name of CSS class to apply to elements when they have become stuck.
 95 |        * @type {String|False}
 96 |        */
 97 |       stickyClass: 'is-affixed',
 98 | 
 99 |       /**
100 |        * Detect when sidebar and its container change height so re-calculate their dimensions.
101 |        * @type {Boolean}
102 |        */
103 |       resizeSensor: true,
104 | 
105 |       /**
106 |        * The sidebar returns to its normal position if its width below this value.
107 |        * @type {Numeric}
108 |        */
109 |       minWidth: false
110 |     };
111 | 
112 |     // ---------------------------------
113 |     // # Class Definition
114 |     // ---------------------------------
115 |     //
116 |     /**
117 |      * Sticky Sidebar Class.
118 |      * @public
119 |      */
120 | 
121 |     var StickySidebar = function () {
122 | 
123 |       /**
124 |        * Sticky Sidebar Constructor.
125 |        * @constructor
126 |        * @param {HTMLElement|String} sidebar - The sidebar element or sidebar selector.
127 |        * @param {Object} options - The options of sticky sidebar.
128 |        */
129 |       function StickySidebar(sidebar) {
130 |         var _this = this;
131 | 
132 |         var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
133 | 
134 |         _classCallCheck(this, StickySidebar);
135 | 
136 |         this.options = StickySidebar.extend(DEFAULTS, options);
137 | 
138 |         // Sidebar element query if there's no one, throw error.
139 |         this.sidebar = 'string' === typeof sidebar ? document.querySelector(sidebar) : sidebar;
140 |         if ('undefined' === typeof this.sidebar) throw new Error("There is no specific sidebar element.");
141 | 
142 |         this.sidebarInner = false;
143 |         this.container = this.sidebar.parentElement;
144 | 
145 |         // Current Affix Type of sidebar element.
146 |         this.affixedType = 'STATIC';
147 |         this.direction = 'down';
148 |         this.support = {
149 |           transform: false,
150 |           transform3d: false
151 |         };
152 | 
153 |         this._initialized = false;
154 |         this._reStyle = false;
155 |         this._breakpoint = false;
156 | 
157 |         // Dimensions of sidebar, container and screen viewport.
158 |         this.dimensions = {
159 |           translateY: 0,
160 |           maxTranslateY: 0,
161 |           topSpacing: 0,
162 |           lastTopSpacing: 0,
163 |           bottomSpacing: 0,
164 |           lastBottomSpacing: 0,
165 |           sidebarHeight: 0,
166 |           sidebarWidth: 0,
167 |           containerTop: 0,
168 |           containerHeight: 0,
169 |           viewportHeight: 0,
170 |           viewportTop: 0,
171 |           lastViewportTop: 0
172 |         };
173 | 
174 |         // Bind event handlers for referencability.
175 |         ['handleEvent'].forEach(function (method) {
176 |           _this[method] = _this[method].bind(_this);
177 |         });
178 | 
179 |         // Initialize sticky sidebar for first time.
180 |         this.initialize();
181 |       }
182 | 
183 |       /**
184 |        * Initializes the sticky sidebar by adding inner wrapper, define its container, 
185 |        * min-width breakpoint, calculating dimensions, adding helper classes and inline style.
186 |        * @private
187 |        */
188 | 
189 | 
190 |       _createClass(StickySidebar, [{
191 |         key: 'initialize',
192 |         value: function initialize() {
193 |           var _this2 = this;
194 | 
195 |           this._setSupportFeatures();
196 | 
197 |           // Get sticky sidebar inner wrapper, if not found, will create one.
198 |           if (this.options.innerWrapperSelector) {
199 |             this.sidebarInner = this.sidebar.querySelector(this.options.innerWrapperSelector);
200 | 
201 |             if (null === this.sidebarInner) this.sidebarInner = false;
202 |           }
203 | 
204 |           if (!this.sidebarInner) {
205 |             var wrapper = document.createElement('div');
206 |             wrapper.setAttribute('class', 'inner-wrapper-sticky');
207 |             this.sidebar.appendChild(wrapper);
208 | 
209 |             while (this.sidebar.firstChild != wrapper) {
210 |               wrapper.appendChild(this.sidebar.firstChild);
211 |             }this.sidebarInner = this.sidebar.querySelector('.inner-wrapper-sticky');
212 |           }
213 | 
214 |           // Container wrapper of the sidebar.
215 |           if (this.options.containerSelector) {
216 |             var containers = document.querySelectorAll(this.options.containerSelector);
217 |             containers = Array.prototype.slice.call(containers);
218 | 
219 |             containers.forEach(function (container, item) {
220 |               if (!container.contains(_this2.sidebar)) return;
221 |               _this2.container = container;
222 |             });
223 | 
224 |             if (!containers.length) throw new Error("The container does not contains on the sidebar.");
225 |           }
226 | 
227 |           // If top/bottom spacing is not function parse value to integer.
228 |           if ('function' !== typeof this.options.topSpacing) this.options.topSpacing = parseInt(this.options.topSpacing) || 0;
229 | 
230 |           if ('function' !== typeof this.options.bottomSpacing) this.options.bottomSpacing = parseInt(this.options.bottomSpacing) || 0;
231 | 
232 |           // Breakdown sticky sidebar if screen width below `options.minWidth`.
233 |           this._widthBreakpoint();
234 | 
235 |           // Calculate dimensions of sidebar, container and viewport.
236 |           this.calcDimensions();
237 | 
238 |           // Affix sidebar in proper position.
239 |           this.stickyPosition();
240 | 
241 |           // Bind all events.
242 |           this.bindEvents();
243 | 
244 |           // Inform other properties the sticky sidebar is initialized.
245 |           this._initialized = true;
246 |         }
247 |       }, {
248 |         key: 'bindEvents',
249 |         value: function bindEvents() {
250 |           window.addEventListener('resize', this, { passive: true, capture: false });
251 |           window.addEventListener('scroll', this, { passive: true, capture: false });
252 | 
253 |           this.sidebar.addEventListener('update' + EVENT_KEY, this);
254 | 
255 |           if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) {
256 |             new ResizeSensor(this.sidebarInner, this.handleEvent);
257 |             new ResizeSensor(this.container, this.handleEvent);
258 |           }
259 |         }
260 |       }, {
261 |         key: 'handleEvent',
262 |         value: function handleEvent(event) {
263 |           this.updateSticky(event);
264 |         }
265 |       }, {
266 |         key: 'calcDimensions',
267 |         value: function calcDimensions() {
268 |           if (this._breakpoint) return;
269 |           var dims = this.dimensions;
270 | 
271 |           // Container of sticky sidebar dimensions.
272 |           dims.containerTop = StickySidebar.offsetRelative(this.container).top;
273 |           dims.containerHeight = this.container.clientHeight;
274 |           dims.containerBottom = dims.containerTop + dims.containerHeight;
275 | 
276 |           // Sidebar dimensions.
277 |           dims.sidebarHeight = this.sidebarInner.offsetHeight;
278 |           dims.sidebarWidth = this.sidebarInner.offsetWidth;
279 | 
280 |           // Screen viewport dimensions.
281 |           dims.viewportHeight = window.innerHeight;
282 | 
283 |           // Maximum sidebar translate Y.
284 |           dims.maxTranslateY = dims.containerHeight - dims.sidebarHeight;
285 | 
286 |           this._calcDimensionsWithScroll();
287 |         }
288 |       }, {
289 |         key: '_calcDimensionsWithScroll',
290 |         value: function _calcDimensionsWithScroll() {
291 |           var dims = this.dimensions;
292 | 
293 |           dims.sidebarLeft = StickySidebar.offsetRelative(this.sidebar).left;
294 | 
295 |           dims.viewportTop = document.documentElement.scrollTop || document.body.scrollTop;
296 |           dims.viewportBottom = dims.viewportTop + dims.viewportHeight;
297 |           dims.viewportLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
298 | 
299 |           dims.topSpacing = this.options.topSpacing;
300 |           dims.bottomSpacing = this.options.bottomSpacing;
301 | 
302 |           if ('function' === typeof dims.topSpacing) dims.topSpacing = parseInt(dims.topSpacing(this.sidebar)) || 0;
303 | 
304 |           if ('function' === typeof dims.bottomSpacing) dims.bottomSpacing = parseInt(dims.bottomSpacing(this.sidebar)) || 0;
305 | 
306 |           if ('VIEWPORT-TOP' === this.affixedType) {
307 |             // Adjust translate Y in the case decrease top spacing value.
308 |             if (dims.topSpacing < dims.lastTopSpacing) {
309 |               dims.translateY += dims.lastTopSpacing - dims.topSpacing;
310 |               this._reStyle = true;
311 |             }
312 |           } else if ('VIEWPORT-BOTTOM' === this.affixedType) {
313 |             // Adjust translate Y in the case decrease bottom spacing value.
314 |             if (dims.bottomSpacing < dims.lastBottomSpacing) {
315 |               dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing;
316 |               this._reStyle = true;
317 |             }
318 |           }
319 | 
320 |           dims.lastTopSpacing = dims.topSpacing;
321 |           dims.lastBottomSpacing = dims.bottomSpacing;
322 |         }
323 |       }, {
324 |         key: 'isSidebarFitsViewport',
325 |         value: function isSidebarFitsViewport() {
326 |           var dims = this.dimensions;
327 |           var offset = this.scrollDirection === 'down' ? dims.lastBottomSpacing : dims.lastTopSpacing;
328 |           return this.dimensions.sidebarHeight + offset < this.dimensions.viewportHeight;
329 |         }
330 |       }, {
331 |         key: 'observeScrollDir',
332 |         value: function observeScrollDir() {
333 |           var dims = this.dimensions;
334 |           if (dims.lastViewportTop === dims.viewportTop) return;
335 | 
336 |           var furthest = 'down' === this.direction ? Math.min : Math.max;
337 | 
338 |           // If the browser is scrolling not in the same direction.
339 |           if (dims.viewportTop === furthest(dims.viewportTop, dims.lastViewportTop)) this.direction = 'down' === this.direction ? 'up' : 'down';
340 |         }
341 |       }, {
342 |         key: 'getAffixType',
343 |         value: function getAffixType() {
344 |           this._calcDimensionsWithScroll();
345 |           var dims = this.dimensions;
346 |           var colliderTop = dims.viewportTop + dims.topSpacing;
347 |           var affixType = this.affixedType;
348 | 
349 |           if (colliderTop <= dims.containerTop || dims.containerHeight <= dims.sidebarHeight) {
350 |             dims.translateY = 0;
351 |             affixType = 'STATIC';
352 |           } else {
353 |             affixType = 'up' === this.direction ? this._getAffixTypeScrollingUp() : this._getAffixTypeScrollingDown();
354 |           }
355 | 
356 |           // Make sure the translate Y is not bigger than container height.
357 |           dims.translateY = Math.max(0, dims.translateY);
358 |           dims.translateY = Math.min(dims.containerHeight, dims.translateY);
359 |           dims.translateY = Math.round(dims.translateY);
360 | 
361 |           dims.lastViewportTop = dims.viewportTop;
362 |           return affixType;
363 |         }
364 |       }, {
365 |         key: '_getAffixTypeScrollingDown',
366 |         value: function _getAffixTypeScrollingDown() {
367 |           var dims = this.dimensions;
368 |           var sidebarBottom = dims.sidebarHeight + dims.containerTop;
369 |           var colliderTop = dims.viewportTop + dims.topSpacing;
370 |           var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
371 |           var affixType = this.affixedType;
372 | 
373 |           if (this.isSidebarFitsViewport()) {
374 |             if (dims.sidebarHeight + colliderTop >= dims.containerBottom) {
375 |               dims.translateY = dims.containerBottom - sidebarBottom;
376 |               affixType = 'CONTAINER-BOTTOM';
377 |             } else if (colliderTop >= dims.containerTop) {
378 |               dims.translateY = colliderTop - dims.containerTop;
379 |               affixType = 'VIEWPORT-TOP';
380 |             }
381 |           } else {
382 |             if (dims.containerBottom <= colliderBottom) {
383 |               dims.translateY = dims.containerBottom - sidebarBottom;
384 |               affixType = 'CONTAINER-BOTTOM';
385 |             } else if (sidebarBottom + dims.translateY <= colliderBottom) {
386 |               dims.translateY = colliderBottom - sidebarBottom;
387 |               affixType = 'VIEWPORT-BOTTOM';
388 |             } else if (dims.containerTop + dims.translateY <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) {
389 |               affixType = 'VIEWPORT-UNBOTTOM';
390 |             }
391 |           }
392 | 
393 |           return affixType;
394 |         }
395 |       }, {
396 |         key: '_getAffixTypeScrollingUp',
397 |         value: function _getAffixTypeScrollingUp() {
398 |           var dims = this.dimensions;
399 |           var sidebarBottom = dims.sidebarHeight + dims.containerTop;
400 |           var colliderTop = dims.viewportTop + dims.topSpacing;
401 |           var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
402 |           var affixType = this.affixedType;
403 | 
404 |           if (colliderTop <= dims.translateY + dims.containerTop) {
405 |             dims.translateY = colliderTop - dims.containerTop;
406 |             affixType = 'VIEWPORT-TOP';
407 |           } else if (dims.containerBottom <= colliderBottom) {
408 |             dims.translateY = dims.containerBottom - sidebarBottom;
409 |             affixType = 'CONTAINER-BOTTOM';
410 |           } else if (!this.isSidebarFitsViewport()) {
411 | 
412 |             if (dims.containerTop <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) {
413 |               affixType = 'VIEWPORT-UNBOTTOM';
414 |             }
415 |           }
416 | 
417 |           return affixType;
418 |         }
419 |       }, {
420 |         key: '_getStyle',
421 |         value: function _getStyle(affixType) {
422 |           if ('undefined' === typeof affixType) return;
423 | 
424 |           var style = { inner: {}, outer: {} };
425 |           var dims = this.dimensions;
426 | 
427 |           switch (affixType) {
428 |             case 'VIEWPORT-TOP':
429 |               style.inner = { position: 'fixed', top: dims.topSpacing,
430 |                 left: dims.sidebarLeft - dims.viewportLeft, width: dims.sidebarWidth };
431 |               break;
432 |             case 'VIEWPORT-BOTTOM':
433 |               style.inner = { position: 'fixed', top: 'auto', left: dims.sidebarLeft,
434 |                 bottom: dims.bottomSpacing, width: dims.sidebarWidth };
435 |               break;
436 |             case 'CONTAINER-BOTTOM':
437 |             case 'VIEWPORT-UNBOTTOM':
438 |               var translate = this._getTranslate(0, dims.translateY + 'px');
439 | 
440 |               if (translate) style.inner = { transform: translate };else style.inner = { position: 'absolute', top: dims.translateY, width: dims.sidebarWidth };
441 |               break;
442 |           }
443 | 
444 |           switch (affixType) {
445 |             case 'VIEWPORT-TOP':
446 |             case 'VIEWPORT-BOTTOM':
447 |             case 'VIEWPORT-UNBOTTOM':
448 |             case 'CONTAINER-BOTTOM':
449 |               style.outer = { height: dims.sidebarHeight, position: 'relative' };
450 |               break;
451 |           }
452 | 
453 |           style.outer = StickySidebar.extend({ height: '', position: '' }, style.outer);
454 |           style.inner = StickySidebar.extend({ position: 'relative', top: '', left: '',
455 |             bottom: '', width: '', transform: '' }, style.inner);
456 | 
457 |           return style;
458 |         }
459 |       }, {
460 |         key: 'stickyPosition',
461 |         value: function stickyPosition(force) {
462 |           if (this._breakpoint) return;
463 | 
464 |           force = this._reStyle || force || false;
465 | 
466 |           var offsetTop = this.options.topSpacing;
467 |           var offsetBottom = this.options.bottomSpacing;
468 | 
469 |           var affixType = this.getAffixType();
470 |           var style = this._getStyle(affixType);
471 | 
472 |           if ((this.affixedType != affixType || force) && affixType) {
473 |             var affixEvent = 'affix.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
474 |             StickySidebar.eventTrigger(this.sidebar, affixEvent);
475 | 
476 |             if ('STATIC' === affixType) StickySidebar.removeClass(this.sidebar, this.options.stickyClass);else StickySidebar.addClass(this.sidebar, this.options.stickyClass);
477 | 
478 |             for (var key in style.outer) {
479 |               var unit = 'number' === typeof style.outer[key] ? 'px' : '';
480 |               this.sidebar.style[key] = style.outer[key] + unit;
481 |             }
482 | 
483 |             for (var _key in style.inner) {
484 |               var _unit = 'number' === typeof style.inner[_key] ? 'px' : '';
485 |               this.sidebarInner.style[_key] = style.inner[_key] + _unit;
486 |             }
487 | 
488 |             var affixedEvent = 'affixed.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
489 |             StickySidebar.eventTrigger(this.sidebar, affixedEvent);
490 |           } else {
491 |             if (this._initialized) this.sidebarInner.style.left = style.inner.left;
492 |           }
493 | 
494 |           this.affixedType = affixType;
495 |         }
496 |       }, {
497 |         key: '_widthBreakpoint',
498 |         value: function _widthBreakpoint() {
499 | 
500 |           if (window.innerWidth <= this.options.minWidth) {
501 |             this._breakpoint = true;
502 |             this.affixedType = 'STATIC';
503 | 
504 |             this.sidebar.removeAttribute('style');
505 |             StickySidebar.removeClass(this.sidebar, this.options.stickyClass);
506 |             this.sidebarInner.removeAttribute('style');
507 |           } else {
508 |             this._breakpoint = false;
509 |           }
510 |         }
511 |       }, {
512 |         key: 'updateSticky',
513 |         value: function updateSticky() {
514 |           var _this3 = this;
515 | 
516 |           var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
517 | 
518 |           if (this._running) return;
519 |           this._running = true;
520 | 
521 |           (function (eventType) {
522 |             requestAnimationFrame(function () {
523 |               switch (eventType) {
524 |                 // When browser is scrolling and re-calculate just dimensions
525 |                 // within scroll. 
526 |                 case 'scroll':
527 |                   _this3._calcDimensionsWithScroll();
528 |                   _this3.observeScrollDir();
529 |                   _this3.stickyPosition();
530 |                   break;
531 | 
532 |                 // When browser is resizing or there's no event, observe width
533 |                 // breakpoint and re-calculate dimensions.
534 |                 case 'resize':
535 |                 default:
536 |                   _this3._widthBreakpoint();
537 |                   _this3.calcDimensions();
538 |                   _this3.stickyPosition(true);
539 |                   break;
540 |               }
541 |               _this3._running = false;
542 |             });
543 |           })(event.type);
544 |         }
545 |       }, {
546 |         key: '_setSupportFeatures',
547 |         value: function _setSupportFeatures() {
548 |           var support = this.support;
549 | 
550 |           support.transform = StickySidebar.supportTransform();
551 |           support.transform3d = StickySidebar.supportTransform(true);
552 |         }
553 |       }, {
554 |         key: '_getTranslate',
555 |         value: function _getTranslate() {
556 |           var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
557 |           var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
558 |           var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
559 | 
560 |           if (this.support.transform3d) return 'translate3d(' + y + ', ' + x + ', ' + z + ')';else if (this.support.translate) return 'translate(' + y + ', ' + x + ')';else return false;
561 |         }
562 |       }, {
563 |         key: 'destroy',
564 |         value: function destroy() {
565 |           window.removeEventListener('resize', this, { capture: false });
566 |           window.removeEventListener('scroll', this, { capture: false });
567 | 
568 |           this.sidebar.classList.remove(this.options.stickyClass);
569 |           this.sidebar.style.minHeight = '';
570 | 
571 |           this.sidebar.removeEventListener('update' + EVENT_KEY, this);
572 | 
573 |           var styleReset = { inner: {}, outer: {} };
574 | 
575 |           styleReset.inner = { position: '', top: '', left: '', bottom: '', width: '', transform: '' };
576 |           styleReset.outer = { height: '', position: '' };
577 | 
578 |           for (var key in styleReset.outer) {
579 |             this.sidebar.style[key] = styleReset.outer[key];
580 |           }for (var _key2 in styleReset.inner) {
581 |             this.sidebarInner.style[_key2] = styleReset.inner[_key2];
582 |           }if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) {
583 |             ResizeSensor.detach(this.sidebarInner, this.handleEvent);
584 |             ResizeSensor.detach(this.container, this.handleEvent);
585 |           }
586 |         }
587 |       }], [{
588 |         key: 'supportTransform',
589 |         value: function supportTransform(transform3d) {
590 |           var result = false,
591 |               property = transform3d ? 'perspective' : 'transform',
592 |               upper = property.charAt(0).toUpperCase() + property.slice(1),
593 |               prefixes = ['Webkit', 'Moz', 'O', 'ms'],
594 |               support = document.createElement('support'),
595 |               style = support.style;
596 | 
597 |           (property + ' ' + prefixes.join(upper + ' ') + upper).split(' ').forEach(function (property, i) {
598 |             if (style[property] !== undefined) {
599 |               result = property;
600 |               return false;
601 |             }
602 |           });
603 |           return result;
604 |         }
605 |       }, {
606 |         key: 'eventTrigger',
607 |         value: function eventTrigger(element, eventName, data) {
608 |           try {
609 |             var event = new CustomEvent(eventName, { detail: data });
610 |           } catch (e) {
611 |             var event = document.createEvent('CustomEvent');
612 |             event.initCustomEvent(eventName, true, true, data);
613 |           }
614 |           element.dispatchEvent(event);
615 |         }
616 |       }, {
617 |         key: 'extend',
618 |         value: function extend(defaults, options) {
619 |           var results = {};
620 |           for (var key in defaults) {
621 |             if ('undefined' !== typeof options[key]) results[key] = options[key];else results[key] = defaults[key];
622 |           }
623 |           return results;
624 |         }
625 |       }, {
626 |         key: 'offsetRelative',
627 |         value: function offsetRelative(element) {
628 |           var result = { left: 0, top: 0 };
629 | 
630 |           do {
631 |             var offsetTop = element.offsetTop;
632 |             var offsetLeft = element.offsetLeft;
633 | 
634 |             if (!isNaN(offsetTop)) result.top += offsetTop;
635 | 
636 |             if (!isNaN(offsetLeft)) result.left += offsetLeft;
637 | 
638 |             element = 'BODY' === element.tagName ? element.parentElement : element.offsetParent;
639 |           } while (element);
640 |           return result;
641 |         }
642 |       }, {
643 |         key: 'addClass',
644 |         value: function addClass(element, className) {
645 |           if (!StickySidebar.hasClass(element, className)) {
646 |             if (element.classList) element.classList.add(className);else element.className += ' ' + className;
647 |           }
648 |         }
649 |       }, {
650 |         key: 'removeClass',
651 |         value: function removeClass(element, className) {
652 |           if (StickySidebar.hasClass(element, className)) {
653 |             if (element.classList) element.classList.remove(className);else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
654 |           }
655 |         }
656 |       }, {
657 |         key: 'hasClass',
658 |         value: function hasClass(element, className) {
659 |           if (element.classList) return element.classList.contains(className);else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
660 |         }
661 |       }, {
662 |         key: 'defaults',
663 |         get: function () {
664 |           return DEFAULTS;
665 |         }
666 |       }]);
667 | 
668 |       return StickySidebar;
669 |     }();
670 | 
671 |     return StickySidebar;
672 |   }();
673 | 
674 |   exports.default = StickySidebar;
675 | 
676 | 
677 |   // Global
678 |   // -------------------------
679 |   window.StickySidebar = StickySidebar;
680 | });
681 | });
682 | 
683 | var stickySidebar$1 = unwrapExports(stickySidebar);
684 | 
685 | exports['default'] = stickySidebar$1;
686 | exports.__moduleExports = stickySidebar;
687 | 
688 | Object.defineProperty(exports, '__esModule', { value: true });
689 | 
690 | })));
691 | 
692 | //# sourceMappingURL=sticky-sidebar.js.map
693 | 


--------------------------------------------------------------------------------
/dist/sticky-sidebar.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"sticky-sidebar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}


--------------------------------------------------------------------------------
/dist/sticky-sidebar.min.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * sticky-sidebar - A JavaScript plugin for making smart and high performance.
3 |  * @version v3.3.1
4 |  * @link https://github.com/abouolia/sticky-sidebar
5 |  * @author Ahmed Bouhuolia
6 |  * @license The MIT License (MIT)
7 | **/
8 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.StickySidebar={})}(this,function(t){"use strict";"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var e,i,n=(function(t,e){(function(t){Object.defineProperty(t,"__esModule",{value:!0});var l,n,e=function(){function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(t,e,i){return e&&n(t.prototype,e),i&&n(t,i),t}}(),i=(l=".stickySidebar",n={topSpacing:0,bottomSpacing:0,containerSelector:!1,innerWrapperSelector:".inner-wrapper-sticky",stickyClass:"is-affixed",resizeSensor:!0,minWidth:!1},function(){function c(t){var e=this,i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,c),this.options=c.extend(n,i),this.sidebar="string"==typeof t?document.querySelector(t):t,void 0===this.sidebar)throw new Error("There is no specific sidebar element.");this.sidebarInner=!1,this.container=this.sidebar.parentElement,this.affixedType="STATIC",this.direction="down",this.support={transform:!1,transform3d:!1},this._initialized=!1,this._reStyle=!1,this._breakpoint=!1,this.dimensions={translateY:0,maxTranslateY:0,topSpacing:0,lastTopSpacing:0,bottomSpacing:0,lastBottomSpacing:0,sidebarHeight:0,sidebarWidth:0,containerTop:0,containerHeight:0,viewportHeight:0,viewportTop:0,lastViewportTop:0},["handleEvent"].forEach(function(t){e[t]=e[t].bind(e)}),this.initialize()}return e(c,[{key:"initialize",value:function(){var i=this;if(this._setSupportFeatures(),this.options.innerWrapperSelector&&(this.sidebarInner=this.sidebar.querySelector(this.options.innerWrapperSelector),null===this.sidebarInner&&(this.sidebarInner=!1)),!this.sidebarInner){var t=document.createElement("div");for(t.setAttribute("class","inner-wrapper-sticky"),this.sidebar.appendChild(t);this.sidebar.firstChild!=t;)t.appendChild(this.sidebar.firstChild);this.sidebarInner=this.sidebar.querySelector(".inner-wrapper-sticky")}if(this.options.containerSelector){var e=document.querySelectorAll(this.options.containerSelector);if((e=Array.prototype.slice.call(e)).forEach(function(t,e){t.contains(i.sidebar)&&(i.container=t)}),!e.length)throw new Error("The container does not contains on the sidebar.")}"function"!=typeof this.options.topSpacing&&(this.options.topSpacing=parseInt(this.options.topSpacing)||0),"function"!=typeof this.options.bottomSpacing&&(this.options.bottomSpacing=parseInt(this.options.bottomSpacing)||0),this._widthBreakpoint(),this.calcDimensions(),this.stickyPosition(),this.bindEvents(),this._initialized=!0}},{key:"bindEvents",value:function(){window.addEventListener("resize",this,{passive:!0,capture:!1}),window.addEventListener("scroll",this,{passive:!0,capture:!1}),this.sidebar.addEventListener("update"+l,this),this.options.resizeSensor&&"undefined"!=typeof ResizeSensor&&(new ResizeSensor(this.sidebarInner,this.handleEvent),new ResizeSensor(this.container,this.handleEvent))}},{key:"handleEvent",value:function(t){this.updateSticky(t)}},{key:"calcDimensions",value:function(){if(!this._breakpoint){var t=this.dimensions;t.containerTop=c.offsetRelative(this.container).top,t.containerHeight=this.container.clientHeight,t.containerBottom=t.containerTop+t.containerHeight,t.sidebarHeight=this.sidebarInner.offsetHeight,t.sidebarWidth=this.sidebarInner.offsetWidth,t.viewportHeight=window.innerHeight,t.maxTranslateY=t.containerHeight-t.sidebarHeight,this._calcDimensionsWithScroll()}}},{key:"_calcDimensionsWithScroll",value:function(){var t=this.dimensions;t.sidebarLeft=c.offsetRelative(this.sidebar).left,t.viewportTop=document.documentElement.scrollTop||document.body.scrollTop,t.viewportBottom=t.viewportTop+t.viewportHeight,t.viewportLeft=document.documentElement.scrollLeft||document.body.scrollLeft,t.topSpacing=this.options.topSpacing,t.bottomSpacing=this.options.bottomSpacing,"function"==typeof t.topSpacing&&(t.topSpacing=parseInt(t.topSpacing(this.sidebar))||0),"function"==typeof t.bottomSpacing&&(t.bottomSpacing=parseInt(t.bottomSpacing(this.sidebar))||0),"VIEWPORT-TOP"===this.affixedType?t.topSpacing<t.lastTopSpacing&&(t.translateY+=t.lastTopSpacing-t.topSpacing,this._reStyle=!0):"VIEWPORT-BOTTOM"===this.affixedType&&t.bottomSpacing<t.lastBottomSpacing&&(t.translateY+=t.lastBottomSpacing-t.bottomSpacing,this._reStyle=!0),t.lastTopSpacing=t.topSpacing,t.lastBottomSpacing=t.bottomSpacing}},{key:"isSidebarFitsViewport",value:function(){var t=this.dimensions,e="down"===this.scrollDirection?t.lastBottomSpacing:t.lastTopSpacing;return this.dimensions.sidebarHeight+e<this.dimensions.viewportHeight}},{key:"observeScrollDir",value:function(){var t=this.dimensions;if(t.lastViewportTop!==t.viewportTop){var e="down"===this.direction?Math.min:Math.max;t.viewportTop===e(t.viewportTop,t.lastViewportTop)&&(this.direction="down"===this.direction?"up":"down")}}},{key:"getAffixType",value:function(){this._calcDimensionsWithScroll();var t=this.dimensions,e=t.viewportTop+t.topSpacing,i=this.affixedType;return e<=t.containerTop||t.containerHeight<=t.sidebarHeight?(t.translateY=0,i="STATIC"):i="up"===this.direction?this._getAffixTypeScrollingUp():this._getAffixTypeScrollingDown(),t.translateY=Math.max(0,t.translateY),t.translateY=Math.min(t.containerHeight,t.translateY),t.translateY=Math.round(t.translateY),t.lastViewportTop=t.viewportTop,i}},{key:"_getAffixTypeScrollingDown",value:function(){var t=this.dimensions,e=t.sidebarHeight+t.containerTop,i=t.viewportTop+t.topSpacing,n=t.viewportBottom-t.bottomSpacing,o=this.affixedType;return this.isSidebarFitsViewport()?t.sidebarHeight+i>=t.containerBottom?(t.translateY=t.containerBottom-e,o="CONTAINER-BOTTOM"):i>=t.containerTop&&(t.translateY=i-t.containerTop,o="VIEWPORT-TOP"):t.containerBottom<=n?(t.translateY=t.containerBottom-e,o="CONTAINER-BOTTOM"):e+t.translateY<=n?(t.translateY=n-e,o="VIEWPORT-BOTTOM"):t.containerTop+t.translateY<=i&&0!==t.translateY&&t.maxTranslateY!==t.translateY&&(o="VIEWPORT-UNBOTTOM"),o}},{key:"_getAffixTypeScrollingUp",value:function(){var t=this.dimensions,e=t.sidebarHeight+t.containerTop,i=t.viewportTop+t.topSpacing,n=t.viewportBottom-t.bottomSpacing,o=this.affixedType;return i<=t.translateY+t.containerTop?(t.translateY=i-t.containerTop,o="VIEWPORT-TOP"):t.containerBottom<=n?(t.translateY=t.containerBottom-e,o="CONTAINER-BOTTOM"):this.isSidebarFitsViewport()||t.containerTop<=i&&0!==t.translateY&&t.maxTranslateY!==t.translateY&&(o="VIEWPORT-UNBOTTOM"),o}},{key:"_getStyle",value:function(t){if(void 0!==t){var e={inner:{},outer:{}},i=this.dimensions;switch(t){case"VIEWPORT-TOP":e.inner={position:"fixed",top:i.topSpacing,left:i.sidebarLeft-i.viewportLeft,width:i.sidebarWidth};break;case"VIEWPORT-BOTTOM":e.inner={position:"fixed",top:"auto",left:i.sidebarLeft,bottom:i.bottomSpacing,width:i.sidebarWidth};break;case"CONTAINER-BOTTOM":case"VIEWPORT-UNBOTTOM":var n=this._getTranslate(0,i.translateY+"px");e.inner=n?{transform:n}:{position:"absolute",top:i.translateY,width:i.sidebarWidth}}switch(t){case"VIEWPORT-TOP":case"VIEWPORT-BOTTOM":case"VIEWPORT-UNBOTTOM":case"CONTAINER-BOTTOM":e.outer={height:i.sidebarHeight,position:"relative"}}return e.outer=c.extend({height:"",position:""},e.outer),e.inner=c.extend({position:"relative",top:"",left:"",bottom:"",width:"",transform:""},e.inner),e}}},{key:"stickyPosition",value:function(t){if(!this._breakpoint){t=this._reStyle||t||!1,this.options.topSpacing,this.options.bottomSpacing;var e=this.getAffixType(),i=this._getStyle(e);if((this.affixedType!=e||t)&&e){var n="affix."+e.toLowerCase().replace("viewport-","")+l;for(var o in c.eventTrigger(this.sidebar,n),"STATIC"===e?c.removeClass(this.sidebar,this.options.stickyClass):c.addClass(this.sidebar,this.options.stickyClass),i.outer){var s="number"==typeof i.outer[o]?"px":"";this.sidebar.style[o]=i.outer[o]+s}for(var r in i.inner){var a="number"==typeof i.inner[r]?"px":"";this.sidebarInner.style[r]=i.inner[r]+a}var p="affixed."+e.toLowerCase().replace("viewport-","")+l;c.eventTrigger(this.sidebar,p)}else this._initialized&&(this.sidebarInner.style.left=i.inner.left);this.affixedType=e}}},{key:"_widthBreakpoint",value:function(){window.innerWidth<=this.options.minWidth?(this._breakpoint=!0,this.affixedType="STATIC",this.sidebar.removeAttribute("style"),c.removeClass(this.sidebar,this.options.stickyClass),this.sidebarInner.removeAttribute("style")):this._breakpoint=!1}},{key:"updateSticky",value:function(){var t,e=this,i=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this._running||(this._running=!0,t=i.type,requestAnimationFrame(function(){switch(t){case"scroll":e._calcDimensionsWithScroll(),e.observeScrollDir(),e.stickyPosition();break;case"resize":default:e._widthBreakpoint(),e.calcDimensions(),e.stickyPosition(!0)}e._running=!1}))}},{key:"_setSupportFeatures",value:function(){var t=this.support;t.transform=c.supportTransform(),t.transform3d=c.supportTransform(!0)}},{key:"_getTranslate",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0,e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0,i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:0;return this.support.transform3d?"translate3d("+t+", "+e+", "+i+")":!!this.support.translate&&"translate("+t+", "+e+")"}},{key:"destroy",value:function(){window.removeEventListener("resize",this,{capture:!1}),window.removeEventListener("scroll",this,{capture:!1}),this.sidebar.classList.remove(this.options.stickyClass),this.sidebar.style.minHeight="",this.sidebar.removeEventListener("update"+l,this);var t={inner:{},outer:{}};for(var e in t.inner={position:"",top:"",left:"",bottom:"",width:"",transform:""},t.outer={height:"",position:""},t.outer)this.sidebar.style[e]=t.outer[e];for(var i in t.inner)this.sidebarInner.style[i]=t.inner[i];this.options.resizeSensor&&"undefined"!=typeof ResizeSensor&&(ResizeSensor.detach(this.sidebarInner,this.handleEvent),ResizeSensor.detach(this.container,this.handleEvent))}}],[{key:"supportTransform",value:function(t){var i=!1,e=t?"perspective":"transform",n=e.charAt(0).toUpperCase()+e.slice(1),o=document.createElement("support").style;return(e+" "+["Webkit","Moz","O","ms"].join(n+" ")+n).split(" ").forEach(function(t,e){if(void 0!==o[t])return i=t,!1}),i}},{key:"eventTrigger",value:function(t,e,i){try{var n=new CustomEvent(e,{detail:i})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i)}t.dispatchEvent(n)}},{key:"extend",value:function(t,e){var i={};for(var n in t)void 0!==e[n]?i[n]=e[n]:i[n]=t[n];return i}},{key:"offsetRelative",value:function(t){var e={left:0,top:0};do{var i=t.offsetTop,n=t.offsetLeft;isNaN(i)||(e.top+=i),isNaN(n)||(e.left+=n),t="BODY"===t.tagName?t.parentElement:t.offsetParent}while(t);return e}},{key:"addClass",value:function(t,e){c.hasClass(t,e)||(t.classList?t.classList.add(e):t.className+=" "+e)}},{key:"removeClass",value:function(t,e){c.hasClass(t,e)&&(t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," "))}},{key:"hasClass",value:function(t,e){return t.classList?t.classList.contains(e):new RegExp("(^| )"+e+"( |$)","gi").test(t.className)}},{key:"defaults",get:function(){return n}}]),c}());t.default=i,window.StickySidebar=i})(e)}(e={exports:{}},e.exports),e.exports),o=(i=n)&&i.__esModule&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i;t.default=o,t.__moduleExports=n,Object.defineProperty(t,"__esModule",{value:!0})});


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sticky-sidebar",
 3 |   "description": "A JavaScript plugin for making smart and high performance.",
 4 |   "version": "3.3.1",
 5 |   "author": "Ahmed Bouhuolia",
 6 |   "email": "a.bouhuolia@gmail.com",
 7 |   "license": "The MIT License (MIT)",
 8 |   "homepage": "https://github.com/abouolia/sticky-sidebar",
 9 |   "main": "./dist/sticky-sidebar.js",
10 |   "module": "./src/sticky-sidebar.js",
11 |   "keywords": [
12 |     "sticky",
13 |     "affix",
14 |     "fixed",
15 |     "sidebar",
16 |     "javascript",
17 |     "jquery"
18 |   ],
19 |   "files": [
20 |     "dist",
21 |     "src"
22 |   ],
23 |   "bugs": {
24 |     "url": "https://github.com/abouolia/sticky-sidebar/issues"
25 |   },
26 |   "scripts": {
27 |     "build": "gulp",
28 |     "test": "mocha --compilers js:babel-core/register"
29 |   },
30 |   "repository": {
31 |     "type": "git",
32 |     "url": "https://github.com/abouolia/sticky-sidebar.git"
33 |   },
34 |   "devDependencies": {
35 |     "babel": "^6.23.0",
36 |     "babel-plugin-check-es2015-constants": "^6.22.0",
37 |     "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
38 |     "babel-plugin-transform-es2015-block-scoped-functions": "^6.22.0",
39 |     "babel-plugin-transform-es2015-block-scoping": "^6.24.1",
40 |     "babel-plugin-transform-es2015-classes": "^6.24.1",
41 |     "babel-plugin-transform-es2015-parameters": "^6.24.1",
42 |     "babel-plugin-transform-export-extensions": "^6.22.0",
43 |     "babel-preset-env": "^1.6.0",
44 |     "babel-register": "^6.26.0",
45 |     "chai": "^4.1.2",
46 |     "gulp": "^3.9.1",
47 |     "gulp-babel": "^6.1.2",
48 |     "gulp-header": "^1.8.9",
49 |     "gulp-rename": "^1.2.2",
50 |     "gulp-rollup": "^2.14.0",
51 |     "gulp-sourcemaps": "^2.6.0",
52 |     "gulp-uglify": "^3.0.0",
53 |     "gulp-util": "^3.0.8",
54 |     "jquery": "^3.3.1",
55 |     "mocha": "^5.0.0",
56 |     "mock-raf": "^1.0.0",
57 |     "rollup": "^0.49.1",
58 |     "rollup-plugin-babel": "^3.0.2",
59 |     "rollup-plugin-commonjs": "^8.2.1",
60 |     "rollup-plugin-eslint": "^4.0.0",
61 |     "rollup-plugin-node-resolve": "^3.0.0",
62 |     "sinon": "^4.4.3"
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/src/jquery.sticky-sidebar.js:
--------------------------------------------------------------------------------
 1 | import StickySidebar from './sticky-sidebar';
 2 | 
 3 | (() => {
 4 | 	if( 'undefined' === typeof window ) return;
 5 | 
 6 | 	const plugin = window.$ || window.jQuery || window.Zepto;
 7 | 	const DATA_NAMESPACE = 'stickySidebar';
 8 | 
 9 | 	// Make sure the site has jquery or zepto plugin.
10 |   if( plugin ){
11 |     /**
12 |      * Sticky Sidebar Plugin Defintion.
13 |      * @param {Object|String} - config
14 |      */
15 |     function _jQueryPlugin(config){
16 |       return this.each(function(){
17 |         var $this = plugin(this),
18 |           data = plugin(this).data(DATA_NAMESPACE);
19 | 
20 |           if( ! data ){
21 |             data = new StickySidebar(this, typeof config == 'object' && config);
22 |             $this.data(DATA_NAMESPACE, data);
23 |           }
24 | 
25 |           if( 'string' === typeof config){
26 |             if (data[config] === undefined && ['destroy', 'updateSticky'].indexOf(config) === -1)
27 |               throw new Error('No method named "'+ config +'"');
28 | 
29 |             data[config]();
30 |           }
31 |       });
32 |     }
33 | 
34 |     plugin.fn.stickySidebar = _jQueryPlugin;
35 |     plugin.fn.stickySidebar.Constructor = StickySidebar;
36 | 
37 |     const old = plugin.fn.stickySidebar;
38 | 
39 |     /**
40 |      * Sticky Sidebar No Conflict.
41 |      */
42 |     plugin.fn.stickySidebar.noConflict = function(){
43 |       plugin.fn.stickySidebar = old;
44 |       return this;
45 |     };
46 |   }
47 | })();
48 | 


--------------------------------------------------------------------------------
/src/sticky-sidebar.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Sticky Sidebar JavaScript Plugin.
  3 |  * @version 3.3.4
  4 |  * @author Ahmed Bouhuolia <a.bouhuolia@gmail.com>
  5 |  * @license The MIT License (MIT)
  6 |  */
  7 | const StickySidebar = (() => {
  8 |   
  9 |     // ---------------------------------
 10 |     // # Define Constants
 11 |     // ---------------------------------
 12 |     //
 13 |     const EVENT_KEY = '.stickySidebar';
 14 |     const VERSION   = '3.3.4';
 15 |   
 16 |     const DEFAULTS = {
 17 |       /**
 18 |        * Additional top spacing of the element when it becomes sticky.
 19 |        * @type {Numeric|Function}
 20 |        */
 21 |       topSpacing: 0,
 22 |   
 23 |       /**
 24 |        * Additional bottom spacing of the element when it becomes sticky.
 25 |        * @type {Numeric|Function}
 26 |        */
 27 |       bottomSpacing: 0,
 28 |   
 29 |       /**
 30 |        * Container sidebar selector to know what the beginning and end of sticky element.
 31 |        * @type {String|False}
 32 |        */
 33 |       containerSelector: false,
 34 |   
 35 |       /**
 36 |        * Inner wrapper selector.
 37 |        * @type {String}
 38 |        */
 39 |       innerWrapperSelector: '.inner-wrapper-sticky',
 40 |   
 41 |       /**
 42 |        * The name of CSS class to apply to elements when they have become stuck.
 43 |        * @type {String|False}
 44 |        */
 45 |       stickyClass: 'is-affixed',
 46 |   
 47 |       /**
 48 |        * Detect when sidebar and its container change height so re-calculate their dimensions.
 49 |        * @type {Boolean}
 50 |        */
 51 |       resizeSensor: true,
 52 |   
 53 |       /**
 54 |        * The sidebar returns to its normal position if its width below this value.
 55 |        * @type {Numeric}
 56 |        */
 57 |       minWidth: false
 58 |     };
 59 |   
 60 |     // ---------------------------------
 61 |     // # Class Definition
 62 |     // ---------------------------------
 63 |     //
 64 |     /**
 65 |      * Sticky Sidebar Class.
 66 |      * @public
 67 |      */
 68 |     class StickySidebar{
 69 |   
 70 |       /**
 71 |        * Sticky Sidebar Constructor.
 72 |        * @constructor
 73 |        * @param {HTMLElement|String} sidebar - The sidebar element or sidebar selector.
 74 |        * @param {Object} options - The options of sticky sidebar.
 75 |        */
 76 |       constructor(sidebar, options = {}){
 77 |         this.options = StickySidebar.extend(DEFAULTS, options);
 78 |   
 79 |         // Sidebar element query if there's no one, throw error.
 80 |         this.sidebar = ('string' === typeof sidebar ) ? document.querySelector(sidebar) : sidebar;
 81 |         if( 'undefined' === typeof this.sidebar )
 82 |           throw new Error("There is no specific sidebar element.");
 83 |   
 84 |         this.sidebarInner = false;
 85 |         this.container = this.sidebar.parentElement;
 86 |   
 87 |         // Current Affix Type of sidebar element.
 88 |         this.affixedType = 'STATIC';
 89 |         this.direction = 'down';
 90 |         this.support = { 
 91 |           transform:   false,
 92 |           transform3d: false
 93 |         };
 94 |   
 95 |         this._initialized = false;
 96 |         this._reStyle = false;
 97 |         this._breakpoint = false;
 98 |         
 99 |         // Dimensions of sidebar, container and screen viewport.
100 |         this.dimensions = {
101 |           translateY: 0,
102 |           maxTranslateY: 0,
103 |           topSpacing: 0,
104 |           lastTopSpacing: 0,
105 |           bottomSpacing: 0,
106 |           lastBottomSpacing: 0,
107 |           sidebarHeight: 0,
108 |           sidebarWidth: 0,
109 |           containerTop: 0,
110 |           containerHeight: 0,
111 |           viewportHeight: 0,
112 |           viewportTop: 0, 
113 |           lastViewportTop: 0,
114 |         };
115 |   
116 |         // Bind event handlers for referencability.
117 |         ['handleEvent'].forEach( (method) => {
118 |           this[method] = this[method].bind(this);
119 |         });
120 |   
121 |         // Initialize sticky sidebar for first time.
122 |         this.initialize();
123 |       }
124 |   
125 |       /**
126 |        * Initializes the sticky sidebar by adding inner wrapper, define its container, 
127 |        * min-width breakpoint, calculating dimensions, adding helper classes and inline style.
128 |        * @private
129 |        */
130 |       initialize(){
131 |         this._setSupportFeatures();
132 |         
133 |         // Get sticky sidebar inner wrapper, if not found, will create one.
134 |         if( this.options.innerWrapperSelector ){
135 |           this.sidebarInner = this.sidebar.querySelector(this.options.innerWrapperSelector);
136 |   
137 |           if( null === this.sidebarInner )
138 |             this.sidebarInner = false;
139 |         }
140 |         
141 |         if( ! this.sidebarInner ){
142 |           let wrapper = document.createElement('div');
143 |           wrapper.setAttribute('class', 'inner-wrapper-sticky');
144 |           this.sidebar.appendChild(wrapper);
145 |   
146 |           while( this.sidebar.firstChild != wrapper )
147 |             wrapper.appendChild(this.sidebar.firstChild);
148 |   
149 |           this.sidebarInner = this.sidebar.querySelector('.inner-wrapper-sticky');
150 |         }
151 |   
152 |         // Container wrapper of the sidebar.
153 |         if( this.options.containerSelector ){
154 |           let containers = document.querySelectorAll(this.options.containerSelector);
155 |           containers = Array.prototype.slice.call(containers);
156 |   
157 |           containers.forEach((container, item) => {
158 |             if( ! container.contains(this.sidebar) ) return;
159 |             this.container = container;
160 |           });
161 |   
162 |           if( ! containers.length )
163 |             throw new Error("The container does not contains on the sidebar.");
164 |         }
165 |         
166 |         // If top/bottom spacing is not function parse value to integer.
167 |         if( 'function' !== typeof this.options.topSpacing )
168 |           this.options.topSpacing = parseInt(this.options.topSpacing) || 0;
169 |   
170 |         if( 'function' !== typeof this.options.bottomSpacing )
171 |           this.options.bottomSpacing = parseInt(this.options.bottomSpacing) || 0;
172 |             
173 |         // Breakdown sticky sidebar if screen width below `options.minWidth`.
174 |         this._widthBreakpoint();
175 |   
176 |         // Calculate dimensions of sidebar, container and viewport.
177 |         this.calcDimensions();
178 |   
179 |         // Affix sidebar in proper position.
180 |         this.stickyPosition();
181 |   
182 |         // Bind all events.
183 |         this.bindEvents();
184 |         
185 |         // Inform other properties the sticky sidebar is initialized.
186 |         this._initialized = true;
187 |       }
188 |   
189 |       /**
190 |        * Bind all events of sticky sidebar plugin.
191 |        * @protected
192 |        */
193 |       bindEvents(){
194 |         window.addEventListener('resize', this, {passive: true, capture: false});
195 |         window.addEventListener('scroll', this, {passive: true, capture: false});
196 |   
197 |         this.sidebar.addEventListener('update' + EVENT_KEY, this);
198 |   
199 |         if( this.options.resizeSensor && 'undefined' !== typeof ResizeSensor ){
200 |           new ResizeSensor(this.sidebarInner, this.handleEvent);
201 |           new ResizeSensor(this.container, this.handleEvent);
202 |         }
203 |       }
204 |   
205 |       /**
206 |        * Handles all events of the plugin.
207 |        * @param {Object} event - Event object passed from listener.
208 |        */
209 |       handleEvent(event){
210 |         this.updateSticky(event);
211 |       }
212 |   
213 |       /**
214 |        * Calculates dimensions of sidebar, container and screen viewpoint
215 |        * @public
216 |        */
217 |       calcDimensions(){
218 |         if( this._breakpoint ) return;
219 |         var dims = this.dimensions;
220 |   
221 |         // Container of sticky sidebar dimensions.
222 |         dims.containerTop    = StickySidebar.offsetRelative(this.container).top;
223 |         dims.containerHeight = this.container.clientHeight;
224 |         dims.containerBottom = dims.containerTop + dims.containerHeight;
225 |   
226 |         // Sidebar dimensions.
227 |         dims.sidebarHeight = this.sidebarInner.offsetHeight;
228 |         dims.sidebarWidth  = this.sidebarInner.offsetWidth;
229 |         
230 |         // Screen viewport dimensions.
231 |         dims.viewportHeight = window.innerHeight;
232 | 
233 |         // Maximum sidebar translate Y.
234 |         dims.maxTranslateY = dims.containerHeight - dims.sidebarHeight;
235 | 
236 |         this._calcDimensionsWithScroll();
237 |       }
238 |   
239 |       /**
240 |        * Some dimensions values need to be up-to-date when scrolling the page.
241 |        * @private
242 |        */
243 |       _calcDimensionsWithScroll(){
244 |         var dims = this.dimensions;
245 |   
246 |         dims.sidebarLeft = StickySidebar.offsetRelative(this.sidebar).left;
247 |   
248 |         dims.viewportTop    = document.documentElement.scrollTop || document.body.scrollTop;
249 |         dims.viewportBottom = dims.viewportTop + dims.viewportHeight;
250 |         dims.viewportLeft   = document.documentElement.scrollLeft || document.body.scrollLeft;
251 |   
252 |         dims.topSpacing    = this.options.topSpacing;
253 |         dims.bottomSpacing = this.options.bottomSpacing;
254 |   
255 |         if( 'function' === typeof dims.topSpacing )
256 |             dims.topSpacing = parseInt(dims.topSpacing(this.sidebar)) || 0;
257 |   
258 |         if( 'function' === typeof dims.bottomSpacing )
259 |             dims.bottomSpacing = parseInt(dims.bottomSpacing(this.sidebar)) || 0;
260 |         
261 |         if( 'VIEWPORT-TOP' === this.affixedType ){
262 |           // Adjust translate Y in the case decrease top spacing value.
263 |           if( dims.topSpacing < dims.lastTopSpacing ){
264 |             dims.translateY += dims.lastTopSpacing - dims.topSpacing;
265 |             this._reStyle = true; 
266 |           }
267 |         } else if( 'VIEWPORT-BOTTOM' === this.affixedType ){
268 |           // Adjust translate Y in the case decrease bottom spacing value.
269 |           if( dims.bottomSpacing < dims.lastBottomSpacing ){
270 |             dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing;
271 |             this._reStyle = true;
272 |           }
273 |         }
274 |         
275 |         dims.lastTopSpacing    = dims.topSpacing;
276 |         dims.lastBottomSpacing = dims.bottomSpacing;
277 |       }
278 |       
279 |       /**
280 |        * Determine whether the sidebar is bigger than viewport.
281 |        * @public
282 |        * @return {Boolean}
283 |        */
284 |       isSidebarFitsViewport(){
285 |         let dims = this.dimensions;
286 |         let offset = this.scrollDirection === 'down' ? dims.lastBottomSpacing : dims.lastTopSpacing;
287 |         return this.dimensions.sidebarHeight + offset < this.dimensions.viewportHeight;
288 |       }
289 |   
290 |       /**
291 |        * Observe browser scrolling direction top and down.
292 |        */
293 |       observeScrollDir(){
294 |         var dims = this.dimensions;
295 |         if( dims.lastViewportTop === dims.viewportTop ) return;
296 |   
297 |         var furthest = 'down' === this.direction ? Math.min : Math.max;
298 |         
299 |         // If the browser is scrolling not in the same direction.
300 |         if( dims.viewportTop === furthest(dims.viewportTop, dims.lastViewportTop) )
301 |           this.direction = 'down' === this.direction ?  'up' : 'down';
302 |       }
303 |   
304 |       /**
305 |        * Gets affix type of sidebar according to current scroll top and scrolling direction.
306 |        * @public
307 |        * @return {String|False} - Proper affix type.
308 |        */
309 |       getAffixType(){
310 |         this._calcDimensionsWithScroll();
311 |         var dims = this.dimensions;
312 |         var colliderTop = dims.viewportTop + dims.topSpacing;
313 |         var affixType = this.affixedType;
314 | 
315 |        if( colliderTop <= dims.containerTop || dims.containerHeight <= dims.sidebarHeight ){
316 |           dims.translateY = 0;
317 |           affixType = 'STATIC';
318 |         } else {
319 |           affixType = ( 'up' === this.direction ) ? 
320 |             this._getAffixTypeScrollingUp() : this._getAffixTypeScrollingDown();
321 |         }
322 | 
323 |         // Make sure the translate Y is not bigger than container height.
324 |         dims.translateY = Math.max(0, dims.translateY);
325 |         dims.translateY = Math.min(dims.containerHeight, dims.translateY);
326 |         dims.translateY = Math.round(dims.translateY);
327 |   
328 |         dims.lastViewportTop = dims.viewportTop;
329 |         return affixType;
330 |       }
331 | 
332 |       /**
333 |        * Get affix type while scrolling down.
334 |        * @private
335 |        * @return {String} - Proper affix type of scrolling down direction.
336 |        */
337 |       _getAffixTypeScrollingDown(){
338 |         var dims = this.dimensions;
339 |         var sidebarBottom = dims.sidebarHeight + dims.containerTop;
340 |         var colliderTop = dims.viewportTop + dims.topSpacing;
341 |         var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
342 |         var affixType = this.affixedType;
343 |         
344 |         if( this.isSidebarFitsViewport() ){
345 |           if( dims.sidebarHeight + colliderTop >= dims.containerBottom ){
346 |             dims.translateY = dims.containerBottom - sidebarBottom;
347 |             affixType = 'CONTAINER-BOTTOM'; 
348 | 
349 |           } else if( colliderTop >= dims.containerTop ){
350 |             dims.translateY = colliderTop - dims.containerTop;
351 |             affixType = 'VIEWPORT-TOP';
352 |           }
353 |         } else {
354 |           if( dims.containerBottom <= colliderBottom ){
355 |             dims.translateY = dims.containerBottom - sidebarBottom; 
356 |             affixType = 'CONTAINER-BOTTOM';    
357 | 
358 |           } else if( sidebarBottom + dims.translateY <= colliderBottom ){
359 |             dims.translateY = colliderBottom - sidebarBottom;
360 |             affixType = 'VIEWPORT-BOTTOM';
361 |           
362 |           } else if( dims.containerTop + dims.translateY <= colliderTop &&
363 |             (0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) ){
364 |             affixType = 'VIEWPORT-UNBOTTOM';
365 |           }
366 |         }
367 | 
368 |         return affixType;
369 |       }
370 |       
371 |       /**
372 |        * Get affix type while scrolling up.
373 |        * @private
374 |        * @return {String} - Proper affix type of scrolling up direction.
375 |        */
376 |       _getAffixTypeScrollingUp(){
377 |         var dims = this.dimensions;
378 |         var sidebarBottom = dims.sidebarHeight + dims.containerTop;
379 |         var colliderTop = dims.viewportTop + dims.topSpacing;
380 |         var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
381 |         var affixType = this.affixedType;
382 | 
383 |         if( colliderTop <= dims.translateY + dims.containerTop ){
384 |           dims.translateY = colliderTop - dims.containerTop;
385 |           affixType = 'VIEWPORT-TOP';
386 |         
387 |         } else if( dims.containerBottom <= colliderBottom ){
388 |           dims.translateY = dims.containerBottom - sidebarBottom;
389 |           affixType = 'CONTAINER-BOTTOM';
390 | 
391 |         } else if( ! this.isSidebarFitsViewport() ){
392 | 
393 |           if( dims.containerTop <= colliderTop && 
394 |               (0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) ){
395 |             affixType = 'VIEWPORT-UNBOTTOM';
396 |           } 
397 |         }
398 | 
399 |         return affixType;
400 |       }
401 | 
402 |       /**
403 |        * Gets inline style of sticky sidebar wrapper and inner wrapper according 
404 |        * to its affix type.
405 |        * @private
406 |        * @param {String} affixType - Affix type of sticky sidebar.
407 |        * @return {Object}
408 |        */
409 |       _getStyle(affixType){
410 |         if( 'undefined' === typeof affixType ) return;
411 |   
412 |         var style = {inner: {}, outer: {}};
413 |         var dims = this.dimensions;
414 |   
415 |         switch( affixType ){
416 |           case 'VIEWPORT-TOP':
417 |             style.inner = {position: 'fixed', top: dims.topSpacing,
418 |                   left: dims.sidebarLeft - dims.viewportLeft, width: dims.sidebarWidth};
419 |             break;
420 |           case 'VIEWPORT-BOTTOM':
421 |             style.inner = {position: 'fixed', top: 'auto', left: dims.sidebarLeft,
422 |                   bottom: dims.bottomSpacing, width: dims.sidebarWidth};
423 |             break;
424 |           case 'CONTAINER-BOTTOM':
425 |           case 'VIEWPORT-UNBOTTOM':
426 |             let translate = this._getTranslate(0, dims.translateY + 'px');
427 |             
428 |             if( translate )
429 |               style.inner = {transform: translate};
430 |             else 
431 |               style.inner = {position: 'absolute', top: dims.translateY, width: dims.sidebarWidth};
432 |             break;
433 |         }
434 |         
435 |         switch( affixType ){
436 |           case 'VIEWPORT-TOP':
437 |           case 'VIEWPORT-BOTTOM':
438 |           case 'VIEWPORT-UNBOTTOM':
439 |           case 'CONTAINER-BOTTOM':
440 |             style.outer = {height: dims.sidebarHeight, position: 'relative'};
441 |             break;
442 |         }
443 |   
444 |         style.outer = StickySidebar.extend({height: '', position: ''}, style.outer);
445 |         style.inner = StickySidebar.extend({position: 'relative', top: '', left: '',
446 |             bottom: '', width: '',  transform: ''}, style.inner);
447 |   
448 |         return style;
449 |       }
450 |      
451 |       /**
452 |        * Cause the sidebar to be sticky according to affix type by adding inline
453 |        * style, adding helper class and trigger events.
454 |        * @function
455 |        * @protected
456 |        * @param {string} force - Update sticky sidebar position by force.
457 |        */
458 |       stickyPosition(force){
459 |         if( this._breakpoint ) return;
460 |   
461 |         force = this._reStyle || force || false;
462 |         
463 |         var offsetTop = this.options.topSpacing;
464 |         var offsetBottom = this.options.bottomSpacing;
465 |   
466 |         var affixType = this.getAffixType();
467 |         var style = this._getStyle(affixType);
468 |         
469 |         if( (this.affixedType != affixType || force) && affixType ){
470 |           let affixEvent = 'affix.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
471 |           StickySidebar.eventTrigger(this.sidebar, affixEvent);
472 |   
473 |           if( 'STATIC' === affixType )
474 |             StickySidebar.removeClass(this.sidebar, this.options.stickyClass);
475 |           else
476 |             StickySidebar.addClass(this.sidebar, this.options.stickyClass);
477 |           
478 |           for( let key in style.outer ){
479 |             let unit = ('number' === typeof style.outer[key]) ? 'px' : '';
480 |             this.sidebar.style[key] = style.outer[key] + unit;
481 |           }
482 |   
483 |           for( let key in style.inner ){
484 |             let unit = ('number' === typeof style.inner[key]) ? 'px' : '';
485 |             this.sidebarInner.style[key] = style.inner[key] + unit;
486 |           }
487 |           
488 |           let affixedEvent = 'affixed.'+ affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
489 |           StickySidebar.eventTrigger(this.sidebar, affixedEvent);
490 |         } else {
491 |           if( this._initialized ) this.sidebarInner.style.left = style.inner.left;
492 |         }
493 |   
494 |         this.affixedType = affixType;
495 |       }
496 |   
497 |       /**
498 |        * Breakdown sticky sidebar when window width is below `options.minWidth` value.
499 |        * @protected
500 |        */
501 |       _widthBreakpoint(){
502 |   
503 |         if( window.innerWidth <= this.options.minWidth ){
504 |           this._breakpoint = true;
505 |           this.affixedType = 'STATIC';
506 |   
507 |           this.sidebar.removeAttribute('style');
508 |           StickySidebar.removeClass(this.sidebar, this.options.stickyClass);
509 |           this.sidebarInner.removeAttribute('style');
510 |         } else {
511 |           this._breakpoint = false;
512 |         }
513 |       }
514 |   
515 |       /**
516 |        * Switches between functions stack for each event type, if there's no 
517 |        * event, it will re-initialize sticky sidebar.
518 |        * @public
519 |        */
520 |       updateSticky(event = {}){
521 |         if( this._running ) return;
522 |         this._running = true;
523 |   
524 |         ((eventType) => {
525 |           requestAnimationFrame(() => {
526 |             switch( eventType ){
527 |               // When browser is scrolling and re-calculate just dimensions
528 |               // within scroll. 
529 |               case 'scroll':
530 |                 this._calcDimensionsWithScroll();
531 |                 this.observeScrollDir();
532 |                 this.stickyPosition();
533 |                 break;
534 |   
535 |               // When browser is resizing or there's no event, observe width
536 |               // breakpoint and re-calculate dimensions.
537 |               case 'resize':
538 |               default: 
539 |                 this._widthBreakpoint();
540 |                 this.calcDimensions();
541 |                 this.stickyPosition(true);
542 |                 break;
543 |             }
544 |             this._running = false;
545 |           });
546 |         })(event.type);
547 |       }
548 |   
549 |       /**
550 |        * Set browser support features to the public property.
551 |        * @private
552 |        */
553 |       _setSupportFeatures(){
554 |         var support = this.support;
555 |   
556 |         support.transform = StickySidebar.supportTransform();
557 |         support.transform3d = StickySidebar.supportTransform(true);
558 |       }
559 |   
560 |       /**
561 |        * Get translate value, if the browser supports transfrom3d, it will adopt it.
562 |        * and the same with translate. if browser doesn't support both return false.
563 |        * @param {Number} y - Value of Y-axis.
564 |        * @param {Number} x - Value of X-axis.
565 |        * @param {Number} z - Value of Z-axis.
566 |        * @return {String|False}
567 |        */
568 |       _getTranslate(y = 0, x = 0, z = 0){
569 |         if( this.support.transform3d ) return 'translate3d(' + y +', '+ x +', '+ z +')';
570 |         else if( this.support.translate ) return 'translate('+ y +', '+ x +')';
571 |         else return false;
572 |       }
573 |   
574 |       /**
575 |        * Destroy sticky sidebar plugin.
576 |        * @public
577 |        */
578 |       destroy(){
579 |         window.removeEventListener('resize', this, {capture: false});
580 |         window.removeEventListener('scroll', this, {capture: false});
581 |   
582 |         this.sidebar.classList.remove(this.options.stickyClass);
583 |         this.sidebar.style.minHeight = '';
584 |   
585 |         this.sidebar.removeEventListener('update' + EVENT_KEY, this);
586 |   
587 |         var styleReset = {inner: {}, outer: {}};
588 |   
589 |         styleReset.inner = {position: '', top: '', left: '', bottom: '', width: '',  transform: ''};
590 |         styleReset.outer = {height: '', position: ''};
591 |   
592 |         for( let key in styleReset.outer )
593 |           this.sidebar.style[key] = styleReset.outer[key];
594 |   
595 |         for( let key in styleReset.inner )
596 |           this.sidebarInner.style[key] = styleReset.inner[key];
597 |   
598 |         if( this.options.resizeSensor && 'undefined' !== typeof ResizeSensor ){
599 |           ResizeSensor.detach(this.sidebarInner, this.handleEvent);
600 |           ResizeSensor.detach(this.container, this.handleEvent);
601 |         }
602 |       }
603 |   
604 |       /**
605 |        * Determine if the browser supports CSS transform feature.
606 |        * @function
607 |        * @static
608 |        * @param {Boolean} transform3d - Detect transform with translate3d.
609 |        * @return {String}
610 |        */
611 |       static supportTransform(transform3d){
612 |         var result = false,
613 |             property = (transform3d) ? 'perspective' : 'transform',
614 |             upper = property.charAt(0).toUpperCase() + property.slice(1),
615 |             prefixes = ['Webkit', 'Moz', 'O', 'ms'],
616 |             support = document.createElement('support'),
617 |             style = support.style;
618 |   
619 |         (property + ' ' + prefixes.join(upper + ' ') + upper).split(' ').forEach(function(property, i) {
620 |           if (style[property] !== undefined) {
621 |             result = property;
622 |             return false;
623 |           }
624 |         });
625 |         return result;
626 |       }
627 |   
628 |       /**
629 |        * Trigger custom event.
630 |        * @static
631 |        * @param {DOMObject} element - Target element on the DOM.
632 |        * @param {String} eventName - Event name.
633 |        * @param {Object} data - 
634 |        */
635 |       static eventTrigger(element, eventName, data){
636 |         try{
637 |           var event = new CustomEvent(eventName, {detail: data});
638 |         } catch(e){
639 |           var event = document.createEvent('CustomEvent');
640 |           event.initCustomEvent(eventName, true, true, data);
641 |         }
642 |         element.dispatchEvent(event);
643 |       }
644 |   
645 |       /**
646 |        * Extend options object with defaults.
647 |        * @function
648 |        * @static
649 |        */
650 |       static extend(defaults, options){
651 |         var results = {};
652 |         for( let key in defaults ){
653 |           if( 'undefined' !== typeof options[key] ) results[key] = options[key];
654 |           else results[key] = defaults[key];
655 |         }
656 |         return results;
657 |       }
658 |   
659 |       /**
660 |        * Get current coordinates left and top of specific element.
661 |        * @static
662 |        */
663 |       static offsetRelative(element){
664 |         var result = {left: 0, top: 0};
665 | 
666 |         do{
667 |           let offsetTop = element.offsetTop;
668 |           let offsetLeft = element.offsetLeft;
669 |   
670 |           if( ! isNaN(offsetTop) )
671 |             result.top += offsetTop;
672 |   
673 |           if( ! isNaN(offsetLeft) )
674 |             result.left += offsetLeft;
675 | 
676 |           element = ( 'BODY' === element.tagName ) ?
677 |                       element.parentElement : element.offsetParent;
678 |         } while(element)
679 |         return result;
680 |       }
681 |   
682 |       /**
683 |        * Add specific class name to specific element.
684 |        * @static 
685 |        * @param {ObjectDOM} element 
686 |        * @param {String} className 
687 |        */
688 |       static addClass(element, className){
689 |         if( ! StickySidebar.hasClass(element, className) ){
690 |           if (element.classList)
691 |             element.classList.add(className);
692 |           else
693 |             element.className += ' ' + className;
694 |         }
695 |       }
696 |       
697 |       /**
698 |        * Remove specific class name to specific element
699 |        * @static
700 |        * @param {ObjectDOM} element 
701 |        * @param {String} className 
702 |        */
703 |       static removeClass(element, className){
704 |         if( StickySidebar.hasClass(element, className) ){
705 |           if (element.classList)
706 |             element.classList.remove(className);
707 |           else
708 |             element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
709 |         }
710 |       }
711 | 
712 |       /**
713 |        * Determine weather the element has specific class name.
714 |        * @static
715 |        * @param {ObjectDOM} element 
716 |        * @param {String} className 
717 |        */
718 |       static hasClass(element, className){
719 |         if (element.classList)
720 |           return element.classList.contains(className);
721 |         else
722 |           return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
723 |       }
724 | 
725 |       /**
726 |        * Gets default values of configuration options.
727 |        * @static
728 |        * @return {Object} 
729 |        */
730 |       static get defaults(){
731 |         return DEFAULTS;
732 |       }
733 |     }
734 |   
735 |     return StickySidebar;
736 |   })();
737 |   
738 |   export default StickySidebar;
739 |   
740 |   // Global
741 |   // -------------------------
742 |   window.StickySidebar = StickySidebar;


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <meta charset="utf-8">
 4 |   <title>Mocha Tests</title>
 5 |   <link href="../node_modules/mocha/mocha.css" rel="stylesheet" />
 6 |   <style rel="stylesheet"> 
 7 |     body{
 8 |         margin: 0;
 9 |         padding: 0;
10 |         border: 0;
11 |     }
12 | 
13 |     .container{
14 |         margin-top: 75px;
15 |         margin-bottom: 50vh;
16 |         width: 700px;
17 |         margin-left: 100px
18 |     }
19 | 
20 |     .container:after{
21 |         content: "";
22 |         display: table;
23 |         clear: both;
24 |     }
25 | 
26 |     .sidebar{
27 |         width: 200px;
28 |         float: left;
29 |     }
30 | 
31 |     .inner-wrapper-sticky,
32 |     .sidebar-inner{
33 |         background: red;
34 |         height: 300px;
35 |     }
36 |     
37 |     .content{
38 |         height: 2000px;
39 |         margin-left: 215px;
40 |         background: cadetblue;
41 |     }
42 |   </style>
43 | </head>
44 | <body>
45 |     <div id="mocha-fixtures"></div>
46 |     <div id="mocha"></div>
47 |     
48 |     <script src="../node_modules/jquery/dist/jquery.js"></script>
49 |     <script src="../dist/jquery.sticky-sidebar.js"></script>
50 |     <script src="../dist/sticky-sidebar.js"></script>
51 |     <script src="../node_modules/sinon/pkg/sinon.js"></script>
52 |     <script src="../node_modules/mocha/mocha.js"></script>
53 |     <script src="../node_modules/chai/chai.js"></script>
54 |     <script src="./mockraf.js"></script>
55 | 
56 |     <script>mocha.setup('bdd')</script>
57 |     <script src="./test.js" type="text/javascript"></script>
58 |     <script>
59 |         mocha.checkLeaks();
60 |         mocha.globals(['jQuery']);
61 |         mocha.run();
62 |     </script>
63 | </body>
64 | </html>


--------------------------------------------------------------------------------
/test/mockraf.js:
--------------------------------------------------------------------------------
 1 | function createMockRaf() {
 2 |     var allCallbacks = {};
 3 |     var callbacksLength = 0;
 4 | 
 5 |     var prevTime = 0;
 6 | 
 7 |     var now = function () {
 8 |         return prevTime;
 9 |     };
10 | 
11 |     var raf = function (callback) {
12 |         callbacksLength += 1;
13 | 
14 |         allCallbacks[callbacksLength] = callback;
15 | 
16 |         return callbacksLength;
17 |     };
18 | 
19 |     var cancel = function (id) {
20 |         delete allCallbacks[id];
21 |     };
22 | 
23 |     var step = function (opts) {
24 |         var options = Object.assign({}, {
25 |             time: 1000 / 60,
26 |             count: 1
27 |         }, opts);
28 | 
29 |         var oldAllCallbacks;
30 | 
31 |         for (var i = 0; i < options.count; i++) {
32 |             oldAllCallbacks = allCallbacks;
33 |             allCallbacks = {};
34 | 
35 |             Object.keys(oldAllCallbacks).forEach(function (id) {
36 |                 var callback = oldAllCallbacks[id];
37 |                 callback(prevTime + options.time);
38 |             });
39 | 
40 |             prevTime += options.time;
41 |         }
42 |     }
43 | 
44 |     return {
45 |         now: now,
46 |         raf: raf,
47 |         cancel: cancel,
48 |         step: step
49 |     };
50 | }


--------------------------------------------------------------------------------
/test/test.js:
--------------------------------------------------------------------------------
  1 | var assert = chai.assert;
  2 | var fixture = document.getElementById('mocha-fixtures');
  3 | var mockRaf = createMockRaf();
  4 | 
  5 | describe('StickySidebar', () => {
  6 | 
  7 |   /**
  8 |    * ------------------------------------
  9 |    * Hooks
 10 |    * ------------------------------------
 11 |    */
 12 |   before(() => {
 13 |     var stub = sinon.stub(window, 'requestAnimationFrame');
 14 |     stub.callsFake(mockRaf.raf);
 15 |   })
 16 |   
 17 |   after(() => {
 18 |     window.requestAnimationFrame.restore();
 19 |   });
 20 | 
 21 |   afterEach(() => {
 22 |     fixture.innerHTML = '';
 23 |     window.requestAnimationFrame.resetHistory();
 24 |     window.scrollTo(0, 0);
 25 |   })
 26 | 
 27 |   /**
 28 |    * ------------------------------------
 29 |    * Unit Testing
 30 |    * ------------------------------------
 31 |    */
 32 |   describe('constructor', () => {
 33 | 
 34 |     it('Shoud throw explicit error when there is no specific element.', () => {
 35 |       assert.throws(() => { new StickySidebar() }, 'There is no specific sidebar element.');
 36 |     })
 37 | 
 38 |     it('should all default configuration options has the right value.', () => {
 39 |       fixture.innerHTML = '<div class="container">' + 
 40 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
 41 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
 42 |       '</div>';
 43 | 
 44 |       const stickySidebar = new StickySidebar('.sidebar');
 45 |       assert.deepEqual(StickySidebar.defaults, stickySidebar.options);
 46 |     });
 47 | 
 48 |     it('Should options of custom configuration extend currectly with default options', () => {
 49 |       fixture.innerHTML = '<div class="container">' + 
 50 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
 51 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
 52 |       '</div>';
 53 | 
 54 |       const stickySidebar = new StickySidebar('.sidebar', {topSpacing: 60, bottomSpacing: 60});
 55 |       assert.equal(stickySidebar.options.topSpacing, 60);
 56 |       assert.equal(stickySidebar.options.bottomSpacing, 60);
 57 |     });
 58 | 
 59 |     it('Should throw explicit error in case sidebar is not inside the container.', () => {
 60 |       fixture.innerHTML = '<div class="container">' + 
 61 |       '  <div class="sidebar"><div class="inner-sidebar"><span>Lorem Ipsum</span></div></div>' +
 62 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
 63 |       '</div>';
 64 | 
 65 |       assert.throws( () => {
 66 |         new StickySidebar('.sidebar', {containerSelector: '.sidebar-container'});
 67 |       }, 'The container does not contains on the sidebar.')
 68 |     });
 69 |   })
 70 | 
 71 |   describe('initialize', () => {
 72 | 
 73 |     it('Should create inner wrapper inside sticky sidebar automatically if not found one.', () => {
 74 |       fixture.innerHTML = '<div class="container">' + 
 75 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
 76 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
 77 |       '</div>';
 78 |       
 79 |       const sidebar = document.querySelector('.sidebar');
 80 |       const stickySidebar = new StickySidebar(sidebar, {
 81 |         innerWrapperSelector: '.inner',
 82 |         containerSelector: '.container'
 83 |       });
 84 | 
 85 |       const innerStickySidebar = sidebar.querySelector('.inner-wrapper-sticky'); 
 86 |       assert.isNotNull(innerStickySidebar, 'There is no inner sticky sidebar wrapper.');
 87 |     })
 88 | 
 89 |     it('Should not create inner sticky sidebar wrapper automatically if found', () => {
 90 |       fixture.innerHTML = '<div class="container">' + 
 91 |       '  <div class="sidebar"><div class="inner-sidebar"><span>Lorem Ipsum</span></div></div>' +
 92 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
 93 |       '</div>';
 94 | 
 95 |       const sidebar = document.querySelector('.sidebar');
 96 |       const stickySidebar = new StickySidebar(sidebar, {
 97 |         innerWrapperSelector: '.inner-sidebar',
 98 |         containerSelector: '.container'
 99 |       });
100 |       const innerStickySidebar = sidebar.querySelector('.inner-sticky-sidebar');
101 |       assert.isNull(innerStickySidebar, 'There is wrapper.');
102 |     })
103 | 
104 |     it('Should topSpacing/bottomSpacing options be parsed from function to integer.', () => {
105 |       fixture.innerHTML = '<div class="container">' + 
106 |       '  <div class="sidebar"><div class="inner-sidebar"><span>Lorem Ipsum</span></div></div>' +
107 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
108 |       '</div>';
109 | 
110 |       const stickySidebar = new StickySidebar('.sidebar', {
111 |         topSpacing: () => { return 60; },
112 |         bottomSpacing: () => { return 60; }
113 |       });
114 |       assert.equal(stickySidebar.dimensions.topSpacing, 60);
115 |       assert.equal(stickySidebar.dimensions.bottomSpacing, 60);
116 |     })
117 | 
118 |     it('Should query sidebar container currectly if it\'s specified inaccurately.', () => {
119 |       fixture.innerHTML = '<div class="container"><div class="container">' + 
120 |       '  <div class="container">' + 
121 |       '    <div class="sidebar"><div class="inner-sidebar"><span>Lorem Ipsum</span></div></div>' +
122 |       '    <div class="content"><span>Lorem Ipsum</span></div>' +
123 |       '  </div>' + 
124 |       '</div></div>';
125 | 
126 |       const container = document.body.querySelector('.container > .container > .container');
127 |       const stickySidebar = new StickySidebar('.sidebar', {
128 |         containerSelector: '.container',
129 |       });
130 |       assert.equal(container, stickySidebar.container);
131 |     })
132 |   })
133 | 
134 |   describe('calcDimensions', () => {
135 | 
136 |     it('Should calculate dimensions of sidebar and its container currectly.', () => {
137 |       fixture.innerHTML = '<div class="container">' + 
138 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
139 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
140 |       '</div>';
141 | 
142 |       var stickySidebar = new StickySidebar('.sidebar', {containerSelector: '.container'});
143 |       const dims = stickySidebar.dimensions;
144 | 
145 |       // container.
146 |       assert.equal(dims.containerTop, 75);
147 |       assert.equal(dims.containerHeight, 2000);
148 |       assert.equal(dims.containerBottom, 2075);
149 | 
150 |       // sidebar.
151 |       assert.equal(dims.sidebarHeight, 300);
152 |       assert.equal(dims.sidebarWidth, 200);      
153 |       
154 |       // top/bottom spacing.
155 |       assert.equal(dims.topSpacing, 0);
156 |       assert.equal(dims.bottomSpacing, 0);
157 |     })
158 | 
159 |     it('Should adjusting translate Y when decreasing top spacing.', () => {
160 |       fixture.innerHTML = '<div class="container">' + 
161 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
162 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
163 |       '</div>';
164 |  
165 |       const stickySidebar = new StickySidebar('.sidebar', {
166 |         containerSelector: '.container', topSpacing: 0
167 |       });
168 | 
169 |       stickySidebar.affixedType = 'VIEWPORT-TOP';
170 | 
171 |       stickySidebar.options.topSpacing = 20;
172 |       stickySidebar.dimensions.lastTopSpacing = 100;
173 |       stickySidebar.dimensions.translateY = 100;
174 | 
175 |       stickySidebar._calcDimensionsWithScroll();
176 | 
177 |       assert.equal(stickySidebar.dimensions.translateY, 180);
178 |     })
179 | 
180 |     it('Should adjusting translate Y when decreasing bottom spacing.', () => {
181 |       fixture.innerHTML = '<div class="container">' + 
182 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
183 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
184 |       '</div>';
185 | 
186 |       const stickySidebar = new StickySidebar('.sidebar', {
187 |         containerSelector: '.container', bottomSpacing: 0
188 |       })
189 | 
190 |       stickySidebar.affixedType = 'VIEWPORT-BOTTOM';
191 | 
192 |       stickySidebar.options.bottomSpacing = 20;
193 |       stickySidebar.dimensions.lastBottomSpacing = 100;
194 |       stickySidebar.dimensions.translateY = 100;
195 | 
196 |       stickySidebar._calcDimensionsWithScroll();
197 | 
198 |       assert.equal(stickySidebar.dimensions.translateY, 180);
199 |     })
200 |   });
201 | 
202 |   describe('isSidebarFitsViewport', () => {
203 | 
204 |     it('Should not sidebar be fit the viewport if sidebar taller than viewport', () =>{ 
205 |       fixture.innerHTML = '<div class="container">' + 
206 |       '  <div class="sidebar"><div style="height: 150vh;" class="sidebar-inner"><span>Lorem Ipsum</span></div></div>' +
207 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
208 |       '</div>';
209 | 
210 |       const stickySidebar = new StickySidebar('.sidebar', {
211 |         containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
212 |       })
213 |       assert.isNotTrue(stickySidebar.isSidebarFitsViewport());
214 |     });
215 | 
216 |     it('Should sidebar be fit the viewport if sidebar smaller than viewport', () => {
217 |       fixture.innerHTML = '<div class="container">' + 
218 |       '  <div class="sidebar"><div style="height: 50vh;" class="sidebar-inner"><span>Lorem Ipsum</span></div></div>' +
219 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
220 |       '</div>';
221 |       
222 |       const stickySidebar = new StickySidebar('.sidebar', {
223 |         containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
224 |       })
225 |       assert.isTrue(stickySidebar.isSidebarFitsViewport());
226 |     });
227 | 
228 |     it('Should not sidebar be fit viewport if sidebar height equal viewport height.', () => {
229 |       fixture.innerHTML = '<div class="container">' + 
230 |       '  <div class="sidebar"><div class="sidebar-inner" style="height: 100vh;"><span>Lorem Ipsum</span></div></div>' +
231 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
232 |       '</div>';
233 |       
234 |       const stickySidebar = new StickySidebar('.sidebar', {
235 |         containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
236 |       })
237 |       assert.isNotTrue(stickySidebar.isSidebarFitsViewport());
238 |     });
239 |   })
240 |   
241 |   describe('observeScrollDir', () => {
242 | 
243 |     it('Should scrolling direction be up.', () =>{ 
244 |       fixture.innerHTML = '<div class="container">' + 
245 |       '  <div class="sidebar"><div class="inner-sidebar"><span>Lorem Ipsum</span></div></div>' +
246 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
247 |       '</div>';
248 | 
249 |       const stickySidebar = new StickySidebar('.sidebar', {
250 |         containerSelector: '.container', innerWrapperSelector: '.inner-sidebar'
251 |       });
252 | 
253 |       stickySidebar.direction = 'down';
254 |       stickySidebar.dimensions.viewportHeight = 1000;
255 |       stickySidebar.dimensions.viewportTop = 100;
256 |       stickySidebar.dimensions.lastViewportTop = 500;
257 | 
258 |       stickySidebar.observeScrollDir();
259 | 
260 |       assert.equal(stickySidebar.direction, 'up');
261 | 
262 |       stickySidebar.dimensions.viewportTop = 50;
263 |       stickySidebar.dimensions.lastViewportTop = 100;
264 | 
265 |       stickySidebar.observeScrollDir();
266 | 
267 |       assert.equal(stickySidebar.direction, 'up');
268 |     })
269 | 
270 |     it('Should scrolling direction be down.', () => {
271 |       fixture.innerHTML = '<div class="container">' + 
272 |       '  <div class="sidebar"><div class="inner-sidebar"><span>Lorem Ipsum</span></div></div>' +
273 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
274 |       '</div>';
275 | 
276 |       const stickySidebar = new StickySidebar('.sidebar');
277 |       
278 |       stickySidebar.direction = 'up';
279 |       stickySidebar.dimensions.viewportHeight = 1000;
280 |       stickySidebar.dimensions.viewportTop = 100;
281 |       stickySidebar.dimensions.lastViewportTop = 10;
282 | 
283 |       stickySidebar.observeScrollDir();
284 | 
285 |       assert.equal(stickySidebar.direction, 'down');
286 | 
287 |       stickySidebar.dimensions.viewportTop = 200;
288 |       stickySidebar.dimensions.lastViewportTop = 100;
289 | 
290 |       stickySidebar.observeScrollDir();
291 | 
292 |       assert.equal(stickySidebar.direction, 'down');
293 |     })
294 |   });
295 | 
296 |   describe('getAffixType', () => {
297 | 
298 |     describe('When scrolling bottom.', () => {
299 | 
300 |       it('Should sidebar has `static` affix type.', (done) => {
301 |         fixture.innerHTML = '<div class="container">' + 
302 |         '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
303 |         '  <div class="content"><span>Lorem Ipsum</span></div>' +
304 |         '</div>';
305 | 
306 |         const stickySidebar = new StickySidebar('.sidebar', {containerSelector: '.container'});
307 | 
308 |         window.addEventListener('scroll', (event) => {
309 |           mockRaf.step();
310 |           assert.equal(stickySidebar.affixedType, 'STATIC');
311 |           done();
312 |         }, {once: true})
313 | 
314 |         window.scrollTo(0, 74);
315 |       })
316 | 
317 |       it('Should sidebar has `viewport-top` affix type. (sidebar fits viewport)', (done) => {
318 |         fixture.innerHTML = '<div class="container">' + 
319 |         '  <div class="sidebar"><div class="sidebar-inner" style="height: 50vh"><span>Lorem Ipsum</span></div></div>' +
320 |         '  <div class="content"><span>Lorem Ipsum</span></div>' +
321 |         '</div>';
322 | 
323 |         const stickySidebar = new StickySidebar('.sidebar', {
324 |           containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
325 |         })
326 | 
327 |         window.addEventListener('scroll', (event) => {
328 |           mockRaf.step();
329 |           assert.equal(stickySidebar.affixedType, 'VIEWPORT-TOP');
330 |           done();
331 |         }, {once: true});
332 | 
333 |         window.scrollTo(0, 300);
334 |       })
335 | 
336 |       it('Should sidebar has `viewport-unbottom` affix type. (sidebar doesn\'t fit viewport)', (done) =>{
337 |         fixture.innerHTML = '<div class="container">' + 
338 |         '  <div class="sidebar"><div class="sidebar-inner" style="height: 150vh;"><span>Lorem Ipsum</span></div></div>' +
339 |         '  <div class="content" style="height: 300vh;"><span>Lorem Ipsum</span></div>' +
340 |         '</div>';
341 | 
342 |         const stickySidebar = new StickySidebar('.sidebar', {
343 |           containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
344 |         })
345 | 
346 |         const scrollTo = (scrollTop) => new Promise((resolve, reject) => {
347 |           window.addEventListener('scroll', () => {
348 |             mockRaf.step();
349 |             resolve();
350 |           }, {once: true})
351 |           
352 |           window.scrollTo(0, parseInt(scrollTop));
353 |         })
354 | 
355 |         scrollTo((window.innerHeight * 3) + 75)
356 |           .then(() => scrollTo(window.innerHeight + 75))
357 |           .then(() => scrollTo((window.innerHeight * 1.2) + 75))
358 |           .then(() =>{
359 |             try{
360 |               assert.equal(stickySidebar.affixedType, 'VIEWPORT-UNBOTTOM')
361 |             } catch(error){
362 |               done(error);
363 |               return;
364 |             }
365 |             done();
366 |           })
367 |       })
368 | 
369 |       it('Should sidebar has `viewport-bottom` affix type. (sidebar doesn\'t fit viewport)', (done) => {
370 |         fixture.innerHTML = '<div class="container">' + 
371 |         '  <div class="sidebar"><div style="height: 150vh;" class="sidebar-inner"><span>Lorem Ipsum</span></div></div>' +
372 |         '  <div class="content" style="height: 300vh;"><span>Lorem Ipsum</span></div>' +
373 |         '</div>';
374 | 
375 |         const stickySidebar = new StickySidebar('.sidebar', {
376 |           containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
377 |         });
378 | 
379 |         window.addEventListener('scroll', (event) => {
380 |           mockRaf.step();
381 |           assert.equal(stickySidebar.affixedType, 'VIEWPORT-BOTTOM');
382 |           done();
383 |         }, {once: true})
384 | 
385 |         window.scrollTo(0, (window.innerHeight) + 75)
386 |       })
387 |  
388 |       it('Should sidebar has `container-bottom` affix type. (sidebar doesn\'t fit the viewport)', (done) => {
389 |         fixture.innerHTML = '<div class="container">' + 
390 |         '  <div class="sidebar"><div style="height: 150vh;" class="sidebar-inner"><span>Lorem Ipsum</span></div></div>' +
391 |         '  <div class="content" style="height: 300vh;"><span>Lorem Ipsum</span></div>' +
392 |         '</div>';
393 | 
394 |         const stickySidebar = new StickySidebar('.sidebar', {
395 |           containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
396 |         });
397 | 
398 |         window.addEventListener('scroll', () => { 
399 |           mockRaf.step();
400 |           assert.equal(stickySidebar.affixedType, 'CONTAINER-BOTTOM');
401 |           done();
402 |         }, {once: true})
403 |         
404 |         window.scrollTo(0, document.body.scrollHeight - window.innerHeight)
405 |       })
406 |     })
407 | 
408 |     describe('When scrolling top.', () => {
409 |          
410 |       it('Should sidebar has `viewport-top` affix type.', (done) => {
411 |         fixture.innerHTML = '<div class="container">' + 
412 |         '  <div class="sidebar"><div class="sidebar-inner" style="height: 50vh"><span>Lorem Ipsum</span></div></div>' +
413 |         '  <div class="content"><span>Lorem Ipsum</span></div>' +
414 |         '</div>';
415 |         
416 |         const stickySidebar = new StickySidebar('.sidebar', {
417 |           containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
418 |         })
419 | 
420 |         const scrollToBottomDocument = () => new Promise( (resolve) => {
421 |           window.addEventListener('scroll', () => {
422 |             mockRaf.step();
423 |             resolve();
424 |           }, {once: true});
425 |           
426 |           window.scrollTo(0, document.body.scrollHeight - window.innerHeight);
427 |         });
428 | 
429 |         const scrollOnViewportTopAffix = (scrollTop) => new Promise( (resolve, reject) => {
430 |           window.addEventListener('scroll', (event) => {
431 |             mockRaf.step();
432 |             
433 |             try{
434 |               assert.equal(stickySidebar.affixedType, 'VIEWPORT-TOP');
435 |               resolve();
436 |             } catch(error){
437 |               done(error);
438 |               reject();
439 |             }
440 |           }, {once: true});
441 | 
442 |           window.scrollTo(0, parseInt(scrollTop));
443 |         })
444 |         
445 |         scrollToBottomDocument()
446 |           .then(() => scrollOnViewportTopAffix(76))
447 |           .then(() => scrollOnViewportTopAffix(100))
448 |           .then(() => scrollOnViewportTopAffix(1000))
449 |           .then(() => scrollOnViewportTopAffix(1200))
450 |           .then(done);
451 |       })
452 |       
453 |       it('Should sidebar has `static` affix type.', (done) => {
454 |         fixture.innerHTML = '<div class="container">' + 
455 |         '  <div class="sidebar"><div class="sidebar-inner"><span>Lorem Ipsum</span></div></div>' +
456 |         '  <div class="content"><span>Lorem Ipsum</span></div>' +
457 |         '</div>';
458 | 
459 |         const stickySidebar = new StickySidebar('.sidebar', {
460 |           containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
461 |         })
462 | 
463 |         scrollTo(0, document.body.scrollHeight - window.innerHeight); // Scroll to end of the document.
464 |         
465 |         const scrollOnStaticAffix = (scrollTop) => new Promise((resolve, reject) => {
466 |           window.addEventListener('scroll', (event) => {
467 |             mockRaf.step()
468 | 
469 |             try{
470 |               assert.equal(stickySidebar.affixedType, 'STATIC');
471 |               resolve();
472 |             } catch(error) {
473 |               done(error);
474 |               reject();
475 |             }
476 |           }, {once: true});
477 | 
478 |           window.scrollTo(0, parseInt(scrollTop));
479 |         })
480 | 
481 |         scrollOnStaticAffix(74)
482 |           .then(() => scrollOnStaticAffix(40))
483 |           .then(() => scrollOnStaticAffix(0))
484 |           .then(done);
485 |       });
486 | 
487 |       it('Should sidebar has `viewport-unbottom` affix type. (Sidebar doesn\'t fit viewport)', (done) => {
488 |         fixture.innerHTML = '<div class="container">' + 
489 |         '  <div class="sidebar"><div style="height: 150vh;" class="sidebar-inner"><span>Lorem Ipsum</span></div></div>' +
490 |         '  <div class="content" style="height: 300vh;"><span>Lorem Ipsum</span></div>' +
491 |         '</div>';
492 | 
493 |         const stickySidebar = new StickySidebar('.sidebar', {
494 |           containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
495 |         })
496 | 
497 |         const scrollTo = (scrollTop) => new Promise( (resolve, reject) => {
498 |           window.addEventListener('scroll', (event) => {
499 |             mockRaf.step();
500 |             resolve();
501 |           }, {once: true})
502 | 
503 |           window.scrollTo(0, parseInt(scrollTop));
504 |         });
505 |         
506 |         scrollTo(window.innerHeight + 75)
507 |           .then(() => scrollTo((window.innerHeight * 0.75) + 75) )
508 |           .then(() => {
509 |             try{
510 |               assert.equal(stickySidebar.affixedType, 'VIEWPORT-UNBOTTOM');
511 |               done();
512 |             } catch(error){
513 |               done(error);
514 |             }
515 |           });
516 |       })
517 |     })
518 |   })
519 | 
520 |   describe('getStyle', () => {
521 |     
522 |     it('Should get style properties of `static` or undefined affix type currectly.', (done) => {
523 |       fixture.innerHTML = '<div class="container">' + 
524 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
525 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
526 |       '</div>';
527 | 
528 |       const stickySidebar = new StickySidebar('.sidebar', {
529 |         containerSelector: '.container', topSpacing: 60, bottomSpacing: 60
530 |       });
531 | 
532 |       window.addEventListener('scroll', (event) => {
533 |         assert.deepOwnInclude( stickySidebar._getStyle('STATIC'), {
534 |           inner: {position: 'relative', top: '', bottom: '', left: '', width: '', transform: ''},
535 |           outer: {height: '', position: ''}
536 |         });
537 |         done();
538 |       }, {once: true});
539 |       
540 |       window.scrollTo(0, 70);
541 |     });
542 | 
543 |     it('Should get style properties of `viewport-top` affix type currectly.', (done) => {
544 |       fixture.innerHTML = '<div class="container">' + 
545 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
546 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
547 |       '</div>';
548 | 
549 |       const stickySidebar = new StickySidebar('.sidebar', {
550 |         containerSelector: '.container', topSpacing: 60, bottomSpacing: 60
551 |       });
552 |       
553 |       window.addEventListener('scroll', function onScroll(event){
554 |         mockRaf.step();
555 |         
556 |         assert.deepOwnInclude( stickySidebar._getStyle('VIEWPORT-TOP'), {
557 |           inner: {position: 'fixed', top: 60, bottom: '', left: 100, width: 200, transform: ''},
558 |           outer: {height: 300, position: 'relative' }
559 |         });
560 |         done();
561 |       }, {once: true});
562 |       
563 |       window.scrollTo(0, 100);
564 |     });
565 | 
566 |     it('Should get style properties of `viewport-bottom` affix type currectly.', (done) => {
567 |       fixture.innerHTML = '<div class="container">' + 
568 |       '  <div class="sidebar"><div style="height: 150vh;" class="sidebar-inner"><span>Lorem Ipsum</span></div></div>' +
569 |       '  <div class="content" style="height: 300vh;"><span>Lorem Ipsum</span></div>' +
570 |       '</div>';
571 | 
572 |       const stickySidebar = new StickySidebar('.sidebar', {
573 |         containerSelector: '.container', innerWrapperSelector: '.sidebar-inner',
574 |         topSpacing: 60, bottomSpacing: 60
575 |       });
576 | 
577 |       window.addEventListener('scroll', (event) => {
578 |         mockRaf.step();
579 | 
580 |         assert.deepOwnInclude( stickySidebar._getStyle('VIEWPORT-BOTTOM'), {
581 |           inner: {position: 'fixed', top: 'auto', bottom: 60, left: 100, width: 200, transform: ''},
582 |           outer: {height: Math.round(window.innerHeight * 1.5), position: 'relative'}
583 |         });
584 |         done();
585 |       }, {once: true})
586 | 
587 |       window.scrollTo(0, Math.round(window.innerHeight * 2));
588 |     });
589 | 
590 |     it('Should get style properties of `container-bottom` affix type currectly.', (done) => {
591 |       fixture.innerHTML = '<div class="container">' + 
592 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
593 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
594 |       '</div>';
595 | 
596 |       const stickySidebar = new StickySidebar('.sidebar', {
597 |         containerSelector: '.container', topSpacing: 0, bottomSpacing: 0
598 |       });
599 | 
600 |       window.addEventListener('scroll', (event) => {
601 |         mockRaf.step();
602 |         
603 |         assert.deepOwnInclude( stickySidebar._getStyle('CONTAINER-BOTTOM'), {
604 |           inner: { position: 'relative', top: '', left: '', bottom: '', width: '',
605 |             transform: 'translate3d(0, 1700px, 0)'},
606 |           outer: {height: 300, position: 'relative'}
607 |         });
608 |         done();
609 |       }, {once: true});
610 | 
611 |       window.scrollTo(0, document.body.scrollHeight - window.innerHeight);
612 |     })
613 | 
614 |     it('Should get style properties of `viewport-unbottom` affix type currectly.', (done) => {
615 |       fixture.innerHTML = '<div class="container">' + 
616 |       '  <div class="sidebar"><div class="sidebar-inner" style="height: 150vh;"><span>Lorem Ipsum</span></div></div>' +
617 |       '  <div class="content" style="height: 300vh;"><span>Lorem Ipsum</span></div>' +
618 |       '</div>';
619 | 
620 |       const stickySidebar = new StickySidebar('.sidebar', {
621 |         containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
622 |       })
623 | 
624 |       const scrollTo = (scrollTop) => new Promise((resolve, reject) => {
625 |         window.addEventListener('scroll', (event) => {
626 |           mockRaf.step();
627 |           resolve();
628 |         }, {once: true})
629 | 
630 |         window.scrollTo(0, (scrollTop));
631 |       });
632 | 
633 |       scrollTo(window.innerHeight + 75)
634 |         .then(() => scrollTo((window.innerHeight * 0.8) + 75))
635 |         .then(() => {
636 |           mockRaf.step();
637 | 
638 |           try{  
639 |             assert.deepOwnInclude( stickySidebar._getStyle('VIEWPORT-UNBOTTOM'), {
640 |               inner: { position: 'relative', top: '', left: '', bottom: '', width: '',
641 |                 transform: 'translate3d(0, '+ Math.round(parseInt(window.innerHeight / 2) - stickySidebar.options.bottomSpacing) +'px, 0)' },
642 |               outer: {height: Math.round(window.innerHeight * 1.5), position: 'relative'}
643 |             })
644 |           } catch(error){
645 |             done(error);
646 |             return;
647 |           }
648 |           done();
649 |         })
650 |     })
651 |   });
652 | 
653 |   describe('stickyPosition', () => {
654 | 
655 |     it('Should add/remove options.stickyClass class currectly.', () => {
656 |       fixture.innerHTML = '<div class="container">' + 
657 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
658 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
659 |       '</div>'; 
660 | 
661 |       const stickySidebar = new StickySidebar('.sidebar', {
662 |         containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
663 |       })
664 | 
665 |       assert.isNotTrue(stickySidebar.sidebar.classList.contains(stickySidebar.options.stickyClass));
666 |     });
667 | 
668 |     it('Should fire `affix.static` and `affixed.static` event.', (done) => {
669 |       fixture.innerHTML = '<div class="container">' + 
670 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
671 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
672 |       '</div>';
673 |       
674 |       const stickySidebar = new StickySidebar('.sidebar', { containerSelector: '.container' });
675 |       
676 |       stickySidebar.sidebar.addEventListener('affix.static.stickySidebar', (event) => {
677 |         stickySidebar.sidebar.addEventListener('affixed.static.stickySidebar', (event) => {
678 |           done()
679 |         }, {once: true});
680 |       }, {once: true})
681 | 
682 |       const scrollTo = (scrollTop) => new Promise((resolve, reject) => {
683 |         window.addEventListener('scroll', (event) => {
684 |           mockRaf.step();
685 |           resolve();
686 |         }, {once: true});
687 |         window.scrollTo(0, parseInt(scrollTop));
688 |       });
689 | 
690 |       scrollTo(300)
691 |         .then(() => scrollTo(40));
692 |     })
693 | 
694 |     it('Should fire `affix.viewport-top` and `affixed.viewport-top` event currectly.', (done) => {
695 |       fixture.innerHTML = '<div class="container">' + 
696 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
697 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
698 |       '</div>';
699 | 
700 |       const stickySidebar = new StickySidebar('.sidebar', { containerSelector: '.container' });
701 |       const sidebar = stickySidebar.sidebar;
702 | 
703 |       window.addEventListener('scroll', (event) => {
704 | 
705 |         sidebar.addEventListener('affix.top.stickySidebar', () => {
706 |           sidebar.addEventListener('affixed.top.stickySidebar', () => {
707 |             done()
708 |           }, {once: true});
709 |         }, {once: true});
710 | 
711 |         mockRaf.step();
712 |       }, {once: true});
713 |       window.scrollTo(0, 100);
714 |     })
715 | 
716 |     it('Should fire `affix.viewport-bottom` and `affixed.viewport-bottom` event.', (done) => {
717 |       fixture.innerHTML = '<div class="container">' + 
718 |       '  <div class="sidebar"><div style="height: 150vh" class="sidebar-inner"><span>Lorem Ipsum</span></div></div>' +
719 |       '  <div class="content" style="height: 300vh"><span>Lorem Ipsum</span></div>' +
720 |       '</div>';
721 | 
722 |       const stickySidebar = new StickySidebar('.sidebar', { 
723 |         containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
724 |       });
725 | 
726 |       window.addEventListener('scroll', (event) => {
727 |         stickySidebar.sidebar.addEventListener('affix.bottom.stickySidebar', (event) => {
728 |           stickySidebar.sidebar.addEventListener('affixed.bottom.stickySidebar', () => {
729 |             done()
730 |           }, {once: true})
731 |         }, {once: true})
732 | 
733 |         mockRaf.step();
734 |       }, {once: true});
735 | 
736 |       window.scrollTo(0, (window.innerHeight * 1.5) + 75);
737 |     })
738 | 
739 |     it('Should fire `affix.viewport-unbottom` and `affixed.viewport-unbottom` event.', (done) => {
740 |       fixture.innerHTML = '<div class="container">' + 
741 |       '  <div class="sidebar"><div style="height: 150vh;" class="sidebar-inner"><span>Lorem Ipsum</span></div></div>' +
742 |       '  <div class="content" style="height: 300vh;"><span>Lorem Ipsum</span></div>' +
743 |       '</div>';
744 | 
745 |       const stickySidebar = new StickySidebar('.sidebar', {
746 |         containerSelector: '.container', innerWrapperSelector: '.sidebar-inner'
747 |       });
748 | 
749 |       const scrollTo = (scrollTop) => new Promise((resolve, reject) => {
750 |         window.addEventListener('scroll', (event) => {
751 |           mockRaf.step();
752 |           resolve();
753 |         }, {once: true})
754 | 
755 |         window.scrollTo(0, parseInt(scrollTop));
756 |       });
757 | 
758 |       stickySidebar.sidebar.addEventListener('affix.unbottom.stickySidebar', () => {
759 |         stickySidebar.sidebar.addEventListener('affixed.unbottom.stickySidebar', () => {
760 |           done()
761 |         }, {once: true});
762 |       }, {once: true})
763 | 
764 |       scrollTo(window.innerHeight + 75)
765 |         .then(() => scrollTo((window.innerHeight * 0.8) + 75));
766 |     })
767 | 
768 |     it('Should fire `affix.container-bottom` and `affixed.container-bottom` event.', (done) => {
769 |       fixture.innerHTML = '<div class="container">' + 
770 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
771 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
772 |       '</div>';
773 | 
774 |       const stickySidebar = new StickySidebar('.sidebar', {containerSelector: '.container'});
775 | 
776 |       window.addEventListener('scroll', (event) => {
777 |         stickySidebar.sidebar.addEventListener('affix.container-bottom.stickySidebar', () => {
778 |           stickySidebar.sidebar.addEventListener('affixed.container-bottom.stickySidebar', () => {
779 |             done()
780 |           }, {once: true});
781 |         }, {once: true})
782 | 
783 |         mockRaf.step();
784 |       }, {once: true})
785 |       
786 |       window.scrollTo(0, document.body.scrollHeight - window.innerHeight);
787 |     })
788 |   })
789 | 
790 |   describe('widthBreakpoint', () => {
791 | 
792 |     it('Should stickness be broken if options.minWidth bigger than viewport width.', () => {
793 |       fixture.innerHTML = '<div class="container">' + 
794 |       '  <div class="sidebar"><div class="sidebar-inner"><span>Lorem Ipsum</span></div></div>' +
795 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
796 |       '</div>';
797 | 
798 |       const stickySidebar = new StickySidebar('.sidebar', {
799 |         containerSelector: '.container', innerWrapperSelector: '.sidebar-inner', minWidth: 500
800 |       })
801 | 
802 |       stickySidebar.dimensions.viewportWidth = 400;
803 |       stickySidebar._widthBreakpoint();
804 | 
805 |       assert.isNull(stickySidebar.sidebar.getAttribute('style'))
806 |       assert.isNull(stickySidebar.sidebarInner.getAttribute('style'));
807 |       assert.isNotTrue(stickySidebar.sidebar.classList.contains(stickySidebar.options.stickyClass));
808 |     })
809 |   })
810 |   
811 |   describe('destroy', () => {
812 | 
813 |     it('Should sticky sidebar be destroyed completely on its element.', () => {
814 |       fixture.innerHTML = '<div class="container">' + 
815 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
816 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
817 |       '</div>';
818 | 
819 |       const stickySidebar = new StickySidebar('.sidebar');
820 |       stickySidebar.destroy();
821 | 
822 |       assert.isNotTrue(stickySidebar.sidebar.classList.contains(stickySidebar.options.stickyClass));
823 |       assert.isNull(stickySidebar.sidebar.getAttribute('style'));
824 |       assert.isNull(stickySidebar.sidebarInner.getAttribute('style'));
825 |     });
826 |   });
827 | 
828 |   describe('jQuery', () => {
829 | 
830 |     it('should return jquery collection containing the element', () => {
831 |       fixture.innerHTML = '<div class="container">' + 
832 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
833 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
834 |       '</div>';
835 | 
836 |       const $sidebar = $('.sidebar');
837 |       const $stickySidebar = $sidebar.stickySidebar();
838 |       assert.isTrue($stickySidebar instanceof $);
839 |       assert.equal($sidebar[0], $stickySidebar[0])
840 |     });
841 | 
842 |     it('should throw explicit error on undefined method', () => {
843 |       fixture.innerHTML = '<div class="container">' + 
844 |       '  <div class="sidebar"><span>Lorem Ipsum</span></div>' +
845 |       '  <div class="content"><span>Lorem Ipsum</span></div>' +
846 |       '</div>';
847 | 
848 |       assert.throws(() => { $('.sidebar').stickySidebar('noMethod'); }, 'No method named "noMethod"');
849 |     });
850 |   }); 
851 | });


--------------------------------------------------------------------------------