affixed - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

lib/index.js

@@ -23,6 +23,10 @@ 'use strict';
       offset: 0,
-      position: 'fixed',
+      position: 'fixed', // options: 'absolute', 'fixed', 'mirror'
       throttle: 5
     };
     this.options = Object.assign({}, DEFAULTS, options);
+    // create mirror if necessary
+    if (this.options.position === 'mirror') {
+      this.createMirror();
+    }
     // retrieve the computer styles for the parent element
@@ -47,24 +51,36 @@ this.parentStyles = window.getComputedStyle(this.options.element.parentNode);
       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';
+        if (this.options.position === 'mirror') {
+          // display the mirror
+          this.mirror.style.display = 'block';
+          // hide the original element
+          this.options.element.style.display = 'none';
         } else {
-          this.options.element.parentNode.style.marginBottom = newHeight + 'px';
+          // re-position the element based on the position ("fixed", "mirror", or "absolute")
+          switch (this.options.position) {
+            default:
+            // no break
+            case 'fixed':
+              this.options.element.style.position = 'fixed';
+              this.options.element.style.top = '0px';
+              break;
+            case 'absolute':
+              this.options.element.style.position = '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 {
+        // hide mirror
+        if (this.options.position === 'mirror') {
+          this.mirror.style.display = 'none';
+        }
+        // show original element
+        this.options.element.style.display = null;
         this.options.element.style.position = 'static';
@@ -78,2 +94,13 @@ if (this.options.element.parentNode.nodeName.toLowerCase() === 'body') {
     }
+  }, {
+    key: 'createMirror',
+    value: function createMirror() {
+      this.mirror = document.createElement('div');
+      this.mirror = this.options.element.cloneNode(true);
+      this.mirror.style.display = 'none';
+      this.mirror.style.position = 'fixed';
+      this.mirror.style.top = '0px';
+      this.mirror.style.left = '0px';
+      document.body.appendChild(this.mirror);
+    }
   }]);
@@ -80,0 +107,0 @@

package.json

 {
   "name": "affixed",
   "description": "Make your containers affixed",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "keywords": [

README.md

@@ -35,3 +35,3 @@ # Affixed
 | `offset` | Amount of pixels to scroll before the element is affixed. |
-| `position` | Either `absolute` or `fixed` positioning. |
+| `position` | Either `absolute` `fixed`, or `mirror` positioning. |
 | `throttle` | Specify the milliseconds to throttle the position updates. |
@@ -43,2 +43,4 @@
 
+You can also choose to use the `mirror` position option. A `mirror` will be created and added to the `<body/>` element as a clone of your specified `element`. This `mirror` will now act as the affixed element.
+
 ### Lint
@@ -45,0 +47,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

Total package byte prevSize

8383

increased by16.56%

Lines of code

96

increased by39.13%

Number of lines in readme file

61

increased by3.39%

No dependency changes