Using a new positioning method to avoid the conflict between fixed elements and CSS translate. Now the menu scrolls smoothly on both desk top and mobile as a fixed menu. The overflow issue on mobile is also fixed, user can't scroll right or left on mobile when the menu is active as a normal 'overflow: hidden' behavior. There's now better support for dynamically changing the size of the menu

Author: Ahmed Radwan

sliiide.js

@@ -45,8 +45,8 @@
     var bodyResetProp = {
       transform: '',
       'overflow-x': '',
-      'overflow-y': '',
       transition: '',
+      position: ''
     };
 
     var sliiiderResetProp = {
@@ -66,10 +66,17 @@
       position: 'fixed'
     };
 
+    var bodyChildrenProp = {
+      transition: 'transform ' + settings.animation_duration + ' ' + settings.animation_curve
+    };
+
+    var htmlProp = {
+      'overflow-x': 'hidden'
+    };
+
     var bodySlidePrepare = {
-      transition: 'transform ' + settings.animation_duration + ' ' + settings.animation_curve,
+      position: 'relative', // to make overflow-x hidden work with mobile browsers
       'overflow-x': 'hidden',
-      'overflow-y': 'hidden'
     };
 
 
@@ -112,37 +119,49 @@
     var Prop = {
 
       left: {
-        properties: {top: '0', left: '0', transform: 'translateX(-100%)'},
-        activateAnimation: {transform: 'translateX(0)'},
-        deactivateAnimation: {transform: 'translateX(-100%)'},
+        properties: function() {
+          var left = '-' + $sliiider.width() + 'px';
+          return {top: '0', left: left};
+        },
+        activateAnimation: {transform: 'translateX(100%)'},
+        deactivateAnimation: {transform: 'translateX(0)'},
         size: function (wHeight, wWidth) {
           return {height: wHeight};
         }
       },
 
       right: {
-        properties: {top: '0', right: '0', transform: 'translateX(100%)'},
-        activateAnimation: {transform: 'translateX(0)'},
-        deactivateAnimation: {transform: 'translateX(100%)'},
+        properties: function() {
+          var right = '-' + $sliiider.width() + 'px';
+          return {top: '0', right: right};
+        },
+        activateAnimation: {transform: 'translateX(-100%)'},
+        deactivateAnimation: {transform: 'translateX(0)'},
         size: function (wHeight, wWidth) {
           return {height: wHeight};
         }
 
       },
 
       top: {
-        properties: {top: '0', right: '0', left:'0', transform: 'translateY(-100%)'},
-        activateAnimation: {transform: 'translateY(0)'},
-        deactivateAnimation: {transform: 'translateY(-100%)'},
+        properties: function() {
+          var top = '-' + $sliiider.height() + 'px';
+          return {left: '0', right:'0', top: top};
+        },
+        activateAnimation: {transform: 'translateY(100%)'},
+        deactivateAnimation: {transform: 'translateY(0)'},
         size: function (wHeight, wWidth) {
           return {width: wWidth};
         }
       },
 
       bottom: {
-        properties: {bottom: '0', right: '0', left:'0', transform: 'translateY(100%)'},
-        activateAnimation: {transform: 'translateY(0)'},
-        deactivateAnimation: {transform: 'translateY(100%)'},
+        properties: function() {
+          var bottom = '-' + $sliiider.height() + 'px';
+          return {left:0, right:0 , bottom: bottom};
+        },
+        activateAnimation: {transform: 'translateY(-100%)'},
+        deactivateAnimation: {transform: 'translateY(0)'},
         size: function (wHeight, wWidth) {
           return {width: wWidth};
         }
@@ -172,10 +191,12 @@
 
   var siiize = function() {
     var windowSize = {};
+    var scroll = getScrollBarWidth();
     windowSize.height = $(window).height();
-    windowSize.width = $(window).width();
+    windowSize.width = $(window).width() + scroll;
     newSize = Prop[settings.place].size(windowSize.height, windowSize.width);
     $sliiider.css(newSize);
+    $sliiider.css(prefixCSS(Prop[settings.place].properties()));
     setSlideDistance();
   };
 
@@ -196,18 +217,45 @@
 
   var prepare = function() {
     $sliiider.css(prefixCSS(prepareProperties));
-    $sliiider.css(prefixCSS(Prop[settings.place]["properties"]));
+    $sliiider.css(prefixCSS(Prop[settings.place].properties()));
     setSlideDistance();
   };
 
+  var getScrollBarWidth = function() {
+    var inner = document.createElement('p');
+    inner.style.width = "100%";
+    inner.style.height = "200px";
+
+    var outer = document.createElement('div');
+    outer.style.position = "absolute";
+    outer.style.top = "0px";
+    outer.style.left = "0px";
+    outer.style.visibility = "hidden";
+    outer.style.width = "200px";
+    outer.style.height = "150px";
+    outer.style.overflow = "hidden";
+    outer.appendChild (inner);
+
+    document.body.appendChild (outer);
+    var w1 = inner.offsetWidth;
+    outer.style.overflow = 'scroll';
+    var w2 = inner.offsetWidth;
+    if (w1 === w2) { w2 = outer.clientWidth; }
+
+    document.body.removeChild (outer);
+
+    return (w1 - w2);
+  };
 
   var activate = function() {
     siiize(); //sets the size of the slider menu and the distance the body will travel on sliding
     $sliiider.css('visibility','visible');
     if(settings.body_slide)
       {
       $body.css(prefixCSS(bodySlidePrepare));
-      $body.css(prefixCSS(bodySlideProp[settings.place].activateAnimation));
+      $('html').css(htmlProp);
+      $body.children().css(prefixCSS(bodyChildrenProp));
+      $body.children().css(prefixCSS(bodySlideProp[settings.place].activateAnimation));
       if((ie !== false) && (ie <= 11))
         {
           $sliiider.css(prefixCSS(Prop[settings.place].activateAnimation));
@@ -220,14 +268,14 @@
       var sliiiderHeight = $sliiider.height();
       var sliiiderOffsetTop = $sliiider.offset().top;
 
-      if((sliiiderOffsetTop !== scrollTop) && settings.place !== "bottom" && !(ie && ie <= 11 && settings.place ==="top"))
-        {
-          $sliiider.css('top', scrollTop);
-        }
-      if(((sliiiderOffsetTop !== scrollTop + windowHeight) && (settings.place === "bottom")))
-        {
-        $sliiider.css('top', scrollTop + windowHeight - sliiiderHeight).css('bottom','');
-        }
+      // if((sliiiderOffsetTop !== scrollTop) && settings.place !== "bottom" && !(ie && ie <= 11 && settings.place ==="top"))
+      //   {
+      //     $sliiider.css('top', scrollTop);
+      //   }
+      // if(((sliiiderOffsetTop !== scrollTop + windowHeight) && (settings.place === "bottom")))
+      //   {
+      //   $sliiider.css('top', scrollTop + windowHeight - sliiiderHeight).css('bottom','');
+      //   }
       }
 
     else {
@@ -244,6 +292,7 @@
   var hideSlider = function(e) {
     $sliiider.css('visibility','hidden');
     $body.css(bodyResetProp);
+    $('html').css(bodyResetProp);
     $body.unbind('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', hideSlider);
     prepare();
   };
@@ -253,7 +302,7 @@
     $body.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', hideSlider);
 
     if(settings.body_slide) {
-      $body.css(prefixCSS(bodySlideProp[settings.place].deactivateAnimation));
+      $body.children().css(prefixCSS(bodySlideProp[settings.place].deactivateAnimation));
       if((ie !== false) && (ie <= 11))
         {$sliiider.css(prefixCSS(Prop[settings.place].deactivateAnimation));}
     }
@@ -272,6 +321,7 @@
   siiize();
   prepare();
   $(window).resize(siiize);
+  $sliiider.resize(siiize);
 
   var handleToggle = function() {
     if (!clicked)
@@ -296,7 +346,6 @@
     reset: function(name) {
       $body.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', deleteProp);
       deactivate();
-      // $body.unbind('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', deleteProp);
     },
     deactivate: function() {deactivate();},
     activate: function() {activate();}