fix(sidenav): animate the sidenav on scrolled parent too.

See angular#5870 Closes angular#5870 Fixes angular#5850
devversion · Nov 26, 2015 · 0f18d3a · 0f18d3a
1 parent 55cc93f
commit 0f18d3a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/components/backdrop/backdrop.scss b/src/components/backdrop/backdrop.scss
@@ -6,10 +6,11 @@ md-backdrop {
 
   position: absolute;
   top:0;
-  bottom:0;
   left: 0;
   right: 0;
 
+  height: 100%;
+
   z-index: $z-index-backdrop;
 
   &.md-menu-backdrop {

diff --git a/src/components/sidenav/sidenav.js b/src/components/sidenav/sidenav.js
@@ -286,6 +286,11 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate,
       parent[isOpen ? 'on' : 'off']('keydown', onKeyDown);
       backdrop[isOpen ? 'on' : 'off']('click', close);
 
+      // Align the sidenav at the current scroll position
+      var topAttribute = parent[0].scrollTop + "px";
+      element.css("top", topAttribute);
+      backdrop.css("top", topAttribute);
+
       if ( isOpen ) {
         // Capture upon opening..
         triggeringElement = $document[0].activeElement;

diff --git a/src/components/sidenav/sidenav.scss b/src/components/sidenav/sidenav.scss
@@ -10,7 +10,7 @@ md-sidenav {
 
   width: $sidenav-mobile-width;
   max-width: $sidenav-mobile-width;
-  bottom: 0;
+  height: 100%;
   overflow: auto;
 
   ul {