Pass on making off canvas overlay behave properly in both absolute and fixed examples

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index aa549a65e8b177fb2193838f1b85e749386eab5b..54119a27ccec23ee27e5bebc17182a41d06c1aaa 100644 (file)
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -54,14 +54,14 @@ class OffCanvas {
 
     // Add an overlay over the content if necessary
     if (this.options.contentOverlay === true) {
-      if ($('.js-off-canvas-overlay').length) {
-        this.$overlay = $('.js-off-canvas-overlay');
+      var overlay = document.createElement('div');
+      var overlayPosition = $(this.$element).css("position") === 'fixed' ? 'is-overlay-fixed' : 'is-overlay-absolute';
+      overlay.setAttribute('class', 'js-off-canvas-overlay ' + overlayPosition);
+      this.$overlay = $(overlay);
+      if(overlayPosition === 'is-overlay-fixed') {
+        $('body').append(this.$overlay);
       } else {
-        var overlay = document.createElement('div');
-        overlay.setAttribute('class', 'js-off-canvas-overlay');
-        $('[data-off-canvas-content]').append(overlay);
-
-        this.$overlay = $(overlay);
+        this.$element.siblings('[data-off-canvas-content]').append(this.$overlay);
       }
     }
 
@@ -89,9 +89,9 @@ class OffCanvas {
       'keydown.zf.offcanvas': this._handleKeyboard.bind(this)
     });
 
-    if (this.options.closeOnClick === true) {                                            
+    if (this.options.closeOnClick === true) {
       var $target = this.options.contentOverlay ? this.$overlay : $('[data-off-canvas-content]');
-      $target.on({'click.zf.offcanvas': this.close.bind(this)});                
+      $target.on({'click.zf.offcanvas': this.close.bind(this)});
     }
   }
 
@@ -200,7 +200,7 @@ class OffCanvas {
     }
 
     if (this.options.trapFocus === true) {
-      $('[data-off-canvas-content]').attr('tabindex', '-1');
+      this.$elements.siblings('[data-off-canvas-content]').attr('tabindex', '-1');
       this._trapFocus();
     }
   }
@@ -262,7 +262,7 @@ class OffCanvas {
 
     this.$triggers.attr('aria-expanded', 'false');
     if (this.options.trapFocus === true) {
-      $('[data-off-canvas-content]').removeAttr('tabindex');
+      this.$element.siblings('[data-off-canvas-content]').removeAttr('tabindex');
     }
   }
 

diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index 5850e8cefaf3545f2aff6834ccc1c904f9c6cdb3..ba7991525fc5f63d9180187de1ce673c50138cbd 100644 (file)
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -86,6 +86,12 @@ $maincontent-class: 'off-canvas-content' !default;
     &.is-closable {
       cursor: pointer;
     }
+    &.is-overlay-absolute {
+      position: absolute;
+    }
+    &.is-overlay-fixed {
+      position: fixed;
+    }
   }
 }