affixed - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

lib/index.js

@@ -9,2 +9,4 @@ 'use strict';
 
+var _lodash = require('lodash');
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -18,3 +20,2 @@
 
-    this.isTicking = false;
     // merge options
@@ -24,3 +25,4 @@ var DEFAULTS = {
       offset: 0,
-      position: 'fixed'
+      position: 'fixed',
+      throttle: 5
     };
@@ -32,3 +34,3 @@ this.options = Object.assign({}, DEFAULTS, options);
     // register window scroll event
-    window.addEventListener('scroll', this.onWindowScroll.bind(this));
+    window.addEventListener('scroll', (0, _lodash.throttle)(this.onWindowScroll.bind(this), this.options.throttle));
   }
@@ -44,45 +46,35 @@
     value: function onWindowScroll() {
-      var _this = this;
-
       this.lastY = window.scrollY;
-      if (!this.isTicking) {
-        window.requestAnimationFrame(function () {
-          var elementHeight = _this.options.element.clientHeight;
-          // if scrolled passed the given offset
-          if (_this.lastY > _this.options.offset) {
-            // apply the position
-            _this.options.element.style.position = _this.options.position;
-            _this.options.element.style.width = '100%';
-            // re-position the element based on the position ("fixed", or "absolute")
-            switch (_this.options.position) {
-              default:
-              // no break
-              case 'fixed':
-                _this.options.element.style.top = '0px';
-                break;
-              case 'absolute':
-                _this.options.element.style.top = _this.lastY + 'px';
-                break;
-            }
-            // update the parent node's margins to offset the affixed element
-            var newHeight = _this.parentMarginOffset + elementHeight;
-            if (_this.options.element.parentNode.nodeName.toLowerCase() === 'body') {
-              _this.options.element.parentNode.style.marginTop = newHeight + 'px';
-            } else {
-              _this.options.element.parentNode.style.marginBottom = newHeight + 'px';
-            }
-          } else {
-            _this.options.element.style.position = 'static';
-            if (_this.options.element.parentNode.nodeName.toLowerCase() === 'body') {
-              _this.options.element.parentNode.style.marginTop = _this.parentMarginOffset + 'px';
-            } else {
-              _this.options.element.parentNode.style.marginBottom = _this.parentMarginOffset + 'px';
-            }
-          }
-          // not ticking
-          _this.isTicking = false;
-        });
+      var elementHeight = this.options.element.clientHeight;
+      // if scrolled passed the given offset
+      if (this.lastY > this.options.offset) {
+        // apply the position
+        this.options.element.style.position = this.options.position;
+        this.options.element.style.width = '100%';
+        // re-position the element based on the position ("fixed", or "absolute")
+        switch (this.options.position) {
+          default:
+          // no break
+          case 'fixed':
+            this.options.element.style.top = '0px';
+            break;
+          case 'absolute':
+            this.options.element.style.top = this.lastY + 'px';
+            break;
+        }
+        // update the parent node's margins to offset the affixed element
+        var newHeight = this.parentMarginOffset + elementHeight;
+        if (this.options.element.parentNode.nodeName.toLowerCase() === 'body') {
+          this.options.element.parentNode.style.marginTop = newHeight + 'px';
+        } else {
+          this.options.element.parentNode.style.marginBottom = newHeight + 'px';
+        }
+      } else {
+        this.options.element.style.position = 'static';
+        if (this.options.element.parentNode.nodeName.toLowerCase() === 'body') {
+          this.options.element.parentNode.style.marginTop = this.parentMarginOffset + 'px';
+        } else {
+          this.options.element.parentNode.style.marginBottom = this.parentMarginOffset + 'px';
+        }
       }
-      // currently ticking
-      this.isTicking = true;
     }
@@ -89,0 +81,0 @@ }]);

package.json

 {
   "name": "affixed",
   "description": "Make your containers affixed",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "main": "lib/index.js",
@@ -64,3 +64,6 @@ "keywords": [
     "prepublish": "npm run build"
+  },
+  "dependencies": {
+    "lodash": "^4.7.0"
   }
 }

README.md

@@ -18,2 +18,3 @@ # Affixed
   position: 'fixed',
+  throttle: 10,
 });
@@ -36,2 +37,3 @@ ````
 | `position` | Either `absolute` or `fixed` positioning. |
+| `throttle` | Specify the milliseconds to throttle the position updates. |
 
@@ -48,2 +50,8 @@ ### Notes
 
+### Dev
+
+````bash
+$ npm run dev
+````
+
 ### Build
@@ -50,0 +58,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

59

increased by15.69%

Worsened metrics

Total package byte prevSize

7192

decreased by-0.75%

Dependency count

1

increased byInfinity%

Lines of code

69

decreased by-10.39%

Dependency changes

• + Addedlodash@^4.7.0

• + Addedlodash@4.17.21(transitive)