Ticket #2391

modules/boonex/decorous/data/template/system/_header_js_custom.html

@@ -4,6 +4,7 @@
 
         //responsive template
         var mainContent = $('.cd-main-content'),
+            content = $('.content-wrapper'),
             header = $('.cd-main-header'),
             sidebar = $('.cd-side-nav'),
             sidebarTrigger = $('.cd-nav-trigger');
@@ -32,9 +33,14 @@
                 var sidebarHeight = sidebar.outerHeight(),
                     windowHeight = $(window).height(),
                     mainContentHeight = mainContent.outerHeight(),
+                    contentHeight = content.outerHeight(),
                     scrollTop = $(window).scrollTop();
 
-                ( ( scrollTop + windowHeight > sidebarHeight ) && ( mainContentHeight - sidebarHeight != 0 ) ) ? sidebar.addClass('is-fixed').css('bottom', 0) : sidebar.removeClass('is-fixed').attr('style', '');
+                //--- Stick sidebar to bottom when scroll down if its height less than a height of main content area.
+                (scrollTop + windowHeight > sidebarHeight) && (mainContentHeight - sidebarHeight != 0) ? sidebar.addClass('is-fixed').css('bottom', 0) : sidebar.removeClass('is-fixed').attr('style', '');
+
+                //--- Stick main content area to bottom when scroll down if its height less than a height of sidebar.
+                (scrollTop + windowHeight > contentHeight) && (mainContentHeight - contentHeight != 0) ? content.addClass('is-fixed').css('bottom', 0) : content.removeClass('is-fixed').attr('style', '');
             }
             scrolling = false;
         }

modules/boonex/decorous/data/template/system/css/general.css

@@ -34,25 +34,25 @@
     right: 100%;
 }
 .cd-main-content::before {
-  /* never visible - used to check MQ in jQuery */
-  display: none;
-  content: 'mobile';
+    /* never visible - used to check MQ in jQuery */
+    display: none;
+    content: 'mobile';
 }
 @media only screen and (min-width: 720px) {
-  .cd-main-content .content-wrapper {
-    margin-left: 110px;
-  }
-  .cd-main-content::before {
-    content: 'tablet';
-  }
+    .cd-main-content .content-wrapper {
+        padding-left: 110px;
+    }
+    .cd-main-content::before {
+        content: 'tablet';
+    }
 }
 @media only screen and (min-width: 1024px) {
-  .cd-main-content .content-wrapper {
-    margin-left: 200px;
-  }
-  .cd-main-content::before {
-    content: 'desktop';
-  }
+    .cd-main-content .content-wrapper {
+        padding-left: 200px;
+    }
+    .cd-main-content::before {
+        content: 'desktop';
+    }
 }
 
 /*--- Header ---*/
@@ -171,9 +171,14 @@
   .cd-side-nav.nav-is-visible {
     box-shadow: none;
   }
-  .cd-side-nav.is-fixed {
+  .cd-side-nav.is-fixed,
+  .content-wrapper.is-fixed {
     position: fixed;
   }
+  .content-wrapper.is-fixed {
+      left: 0;
+      width: 100%;
+  }
   .cd-side-nav > ul {
     /* reset style */
     padding: 0;