Fix navar-collapse-fixed-top

Fixed: #110

source/plg_system_t3/base/js/off-canvas.js

@@ -22,7 +22,12 @@
 				$nav = null,
 				$fixeditems = null;
 
-			if (!$btn.length) return;
+			if (!$btn.length){
+				return;
+			}
+
+			//mark that we have off-canvas menu
+			$(document.documentElement).addClass('off-canvas-ready');
 
 			$nav = $('<div class="t3-mainnav" />').appendTo($('<div id="off-canvas-nav"></div>').appendTo(document.body));
 			$($btn.data('target')).clone().appendTo($nav);
@@ -37,16 +42,16 @@
 				return false;
 			});
 
-			posNav = function () {
+			var posNav = function () {
 				var t = $(window).scrollTop();
 				if (t < $nav.position().top) $nav.css('top', t);
-			};
+			},
 
 			bdHideNav = function (e) {
 				e.preventDefault();
 				hideNav();
 				return false;
-			};
+			},
 
 			showNav = function () {
 				$('html').addClass ('off-canvas');
@@ -71,9 +76,9 @@
 				setTimeout (function(){
 					wpfix(2);
 				}, 1000);
-			};
+			},
 
-			hideNav = function () {				
+			hideNav = function () {
 				$(window).unbind('scroll touchmove', posNav);
 				$('#off-canvas-nav').unbind ('click');
 				$('#off-canvas-nav a').unbind ('click', hideNav);
@@ -85,25 +90,28 @@
 				setTimeout (function(){
 					$('html').removeClass ('off-canvas');
 				}, 600);
-			};
+			},
 
 			wpfix = function (step) {
 				// check if need fixed
-				if ($fixeditems == -1) return ;// no need to fix
+				if ($fixeditems == -1){
+					return;// no need to fix
+				}
+
 				if (!$fixeditems) {
 					$fixeditems = $('body').children().filter(function(){ return $(this).css('position') === 'fixed' });
 					if (!$fixeditems.length) {
 						$fixeditems = -1;
-						return ;
+						return;
 					}
 				}
 
 				if (step==1) {
-					$fixeditems.css({'position': 'absolute', 'top': $(window).scrollTop()+'px'});
+					$fixeditems.css({'position': 'absolute', 'top': $(window).scrollTop() + 'px'});
 				} else {
 					$fixeditems.css({'position': '', 'top': ''});
 				}
-			}
+			};
 		}
 	})
 

source/plg_system_t3/base/js/script.js

@@ -126,4 +126,41 @@
 			});
 		}
 	});
+
+	//fix animation for navbar-collapse-fixed-top||bottom
+	$(window).load(function(){
+		if ($.support.transition) {
+			if(!$(document.documentElement).hasClass('off-canvas-ready') &&
+				($('.navbar-collapse-fixed-top').length ||
+					$('.navbar-collapse-fixed-bottom').length)){
+
+				var btn = $('.btn-navbar');
+				if (!btn.length){
+					return;
+				}
+
+				if(btn.data('target')){
+					var nav = $(btn.data('target'));
+					if(!nav.length){
+						return;
+					}
+
+					var fixedtop = nav.closest('.navbar-collapse-fixed-top').length;
+
+					btn.on('click', function(){
+						nav
+							.addClass('animate')
+							.css('max-height', fixedtop ?
+								((window.innerHeight || $(window).height()) - (parseFloat(nav.css('top')) || 0)) :
+								(parseFloat(nav.css('bottom')) || 0));
+					});
+					nav.on('shown hidden', function(){
+						nav.removeClass('animate');
+					});
+				}
+			}
+		}
+	});
+
+
 }(jQuery);

source/plg_system_t3/base/less/t3-responsive.less

@@ -38,8 +38,9 @@
       overflow-y: auto;
       top: @navbarHeight;
       bottom: 0;
+      -webkit-overflow-scrolling: touch;
       > * {
-        padding-bottom: 50px;
+        -webkit-transform: translateZ(0);
       }
     }
   }

source/tpl_t3_blank/less/navigation-responsive.less

@@ -130,7 +130,8 @@
 
     // Full width when fixed
     // ---------------------
-    &.navbar-collapse-fixed-top {
+    &.navbar-collapse-fixed-top,
+	&.navbar-collapse-fixed-bottom {
       margin-left: 0;
       margin-right: 0;
     }

source/tpl_t3_blank/tpls/blocks/mainnav.php

@@ -17,13 +17,13 @@
         <i class="icon-reorder"></i>
       </button>
 
-  	  <div class="nav-collapse collapse<?php echo $this->getParam('navigation_collapse_showsub', 1) ? ' always-show' : '' ?>">
+      <div class="nav-collapse collapse<?php echo $this->getParam('navigation_collapse_showsub', 1) ? ' always-show' : '' ?>">
       <?php if ($this->getParam('navigation_type') == 'megamenu') : ?>
         <?php $this->megamenu($this->getParam('mm_type', 'mainmenu')) ?>
       <?php else : ?>
         <jdoc:include type="modules" name="<?php $this->_p('mainnav') ?>" style="raw" />
       <?php endif ?>
-  		</div>
+      </div>
     </div>
   </div>
 </nav>