Fixes for fixed elements used with sidebars

src/definitions/modules/sidebar.js

@@ -115,9 +115,11 @@ $.fn.sidebar = function(parameters) {
 
         bind: {
           clickaway: function() {
-            $(window)
-              .on('DOMMouseScroll' + eventNamespace, module.event.scroll)
-            ;
+            if(settings.scrollLock) {
+              $(window)
+                .on('DOMMouseScroll' + eventNamespace, module.event.scroll)
+              ;
+            }
             $context
               .on('click' + eventNamespace, module.event.clickaway)
               .on('touchend' + eventNamespace, module.event.clickaway)
@@ -129,7 +131,9 @@ $.fn.sidebar = function(parameters) {
             $context
               .off(eventNamespace)
             ;
-            $(window).off('DOMMouseScroll' + eventNamespace);
+            if(settings.scrollLock) {
+              $(window).off('DOMMouseScroll' + eventNamespace);
+            }
           }
         },
 
@@ -294,9 +298,6 @@ $.fn.sidebar = function(parameters) {
           else {
             if(settings.transition !== 'safe') {
               $module.scrollTop(0);
-              if(settings.workaround === 'scroll') {
-                window.scrollTo(0, 0);
-              }
             }
             module.remove.allVisible();
             requestAnimationFrame(transition);
@@ -646,34 +647,30 @@ $.fn.sidebar = function(parameters) {
 
 $.fn.sidebar.settings = {
 
-  name            : 'Sidebar',
-  namespace       : 'sidebar',
+  name             : 'Sidebar',
+  namespace        : 'sidebar',
 
-  debug           : false,
-  verbose         : false,
-  performance     : false,
+  debug            : false,
+  verbose          : false,
+  performance      : false,
 
+  workaround       : false,
   transition       : 'overlay',
   mobileTransition : 'slide along',
+  context          : 'body',
+  exclusive        : true,
 
-  context         : 'body',
-  useCSS          : true,
-  duration        : 300,
-
-  dimPage         : true,
-
-  exclusive       : true,
+  scrollLock       : false,
 
-  onChange        : function(){},
-  onShow          : function(){},
-  onHide          : function(){},
+  onChange         : function(){},
+  onShow           : function(){},
+  onHide           : function(){},
 
-  onHidden        : function(){},
-  onVisible       : function(){},
+  onHidden         : function(){},
+  onVisible        : function(){},
 
-  workaround      : 'scroll',
 
-  className       : {
+  className        : {
     pushable : 'pushable',
     active   : 'active',
     visible  : 'visible',
@@ -687,7 +684,7 @@ $.fn.sidebar.settings = {
     pusher  : '.pusher',
     fixed   : '.ui.fixed',
     page    : '.page',
-    omitted : 'script, link, style, .ui.modal, .ui.nag'
+    omitted : 'script, link, style, .ui.modal, .ui.nag, .ui.fixed'
   },
 
   error   : {

src/definitions/modules/sidebar.less

@@ -55,6 +55,16 @@
   overflow-x: hidden;
 }
 
+/*--------------
+     Fixed
+---------------*/
+
+.pushable > .ui.fixed {
+  position: fixed;
+  transition: transform @duration @easing;
+  z-index: @fixedLayer;
+}
+
 /*--------------
      Pusher
 ---------------*/
@@ -62,7 +72,7 @@
 .pushable > .pusher {
   background: @canvasBackground;
   height: 100%;
-  z-index: 1002;
+  z-index: @middleLayer;
   transition: transform @duration @easing;
 }
 
@@ -192,31 +202,6 @@
   transition: transform @duration @easing;
 }
 
-/*--------------
-      Push
----------------*/
-
-/* Set-Up */
-.pushable.push > .pusher {
-  transform: translate3d(0px, 0, 0);
-}
-.pushable.push > .visible.ui.sidebar {
-  transform: translate3d(-100%, 0, 0);
-}
-
-/* Pushed */
-.pushable.push.pushed > .visible.ui.sidebar {
-  transform: translate3d(0%, 0, 0);
-}
-.pushable.push.pushed > .pusher {
-  transform: translate3d(@sidebarWidth, 0, 0);
-}
-
-.pushable.push.show > .visible.ui.sidebar,
-.pushable.push.hide > .visible.ui.sidebar {
-  transition: transform @duration @easing;
-}
-
 /*--------------
     Safe Mode
 ---------------*/
@@ -243,14 +228,44 @@
 }
 
 
+/*--------------
+      Push
+---------------*/
+
+/* Set-Up */
+.pushable.push > .fixed,
+.pushable.push > .pusher {
+  transform: translate3d(0px, 0, 0);
+}
+.pushable.push > .visible.ui.sidebar {
+  transform: translate3d(-100%, 0, 0);
+}
+
+/* Pushed */
+.pushable.push.pushed > .visible.ui.sidebar {
+  transform: translate3d(0%, 0, 0);
+}
+.pushable.push.pushed > .fixed,
+.pushable.push.pushed > .pusher {
+  transform: translate3d(@sidebarWidth, 0, 0);
+}
+
+.pushable.push.show > .visible.ui.sidebar,
+.pushable.push.hide > .visible.ui.sidebar {
+  transition: transform @duration @easing;
+}
+
 
 /*--------------
      Reveal
 ---------------*/
 
 /* Set-up */
+.pushable.reveal > .fixed,
 .pushable.reveal > .pusher {
   transform: translate3d(0px, 0, 0);
+}
+.pushable.reveal > .pusher {
   z-index: @bottomLayer;
 }
 .pushable.reveal > .visible.ui.sidebar {
@@ -258,6 +273,7 @@
 }
 
 /* Pushed */
+.pushable.reveal.pushed > .fixed,
 .pushable.reveal.pushed > .pusher {
   transform: translate3d(@sidebarWidth, 0, 0);
 }
@@ -268,8 +284,11 @@
 ---------------*/
 
 /* Set-up */
+.pushable.slide.along > .fixed,
 .pushable.slide.along > .pusher {
   transform: translate3d(0px, 0, 0);
+}
+.pushable.slide.along > .pusher {
   z-index: @bottomLayer;
 }
 .pushable.slide.along > .visible.ui.sidebar {
@@ -277,6 +296,7 @@
 }
 
 /* Pushed */
+.pushable.slide.along.pushed > .fixed,
 .pushable.slide.along.pushed > .pusher {
   transform: translate3d(@sidebarWidth, 0, 0);
 }
@@ -295,6 +315,7 @@
 ---------------*/
 
 /* Set-up */
+.pushable.slide.out > .fixed,
 .pushable.slide.out > .pusher {
   transform: translate3d(0px, 0, 0);
 }
@@ -303,6 +324,7 @@
 }
 
 /* Pushed */
+.pushable.slide.out.pushed > .fixed,
 .pushable.slide.out.pushed > .pusher {
   transform: translate3d(@sidebarWidth, 0, 0);
 }
@@ -322,6 +344,9 @@
 ---------------*/
 
 /* Set-up */
+.pushable.scale.down > .fixed {
+  transform: translate3d(0px, 0, 0);
+}
 .pushable.scale.down > .pusher {
   z-index: @bottomLayer;
   transform-origin: 75% 50%;
@@ -339,6 +364,9 @@
 .pushable.scale.down.pushed > .visible.ui.sidebar {
   transform: translate3d(0, 0, 0);
 }
+.pushable.scale.down.pushed > .fixed {
+  transform: translate3d(@sidebarWidth, 0, 0);
+}
 
 /* 3D transition cant have duration set until animation */
 .pushable.scale.down.show > .visible.ui.sidebar,
@@ -361,6 +389,7 @@
 }
 
 /* Pushed */
+.pushable.scale.up.pushed > .fixed,
 .pushable.scale.up.pushed > .pusher {
   transform: translate3d(@sidebarWidth, 0, 0);
 }
@@ -439,6 +468,10 @@
   transform: translate3d(-100%, 0, 0) rotateY(0deg);
   transition: transform @duration ease 0s;
 }
+.pushable.rotate.in.active,
+.pushable.rotate.in.hide {
+  overflow-y: hidden;
+}
 
 /* Animation */
 .pushable.rotate.in.show > .ui.sidebar,

src/themes/packages/default/modules/sidebar.variables

@@ -18,4 +18,5 @@
 @bottomLayer: 1001;
 @middleLayer: 1002;
 @dimmerLayer: 1003;
-@topLayer: 1004;
+@topLayer: 1005;
+@fixedLayer: 1006;