Fixed side menu overlapped site footer (#75)

Redocly · Aug 31, 2016 · a8d98b1 · a8d98b1
1 parent b649d52
commit a8d98b1
Showing 1 changed file with 29 additions and 2 deletions.
diff --git a/lib/shared/components/StickySidebar/sticky-sidebar.ts b/lib/shared/components/StickySidebar/sticky-sidebar.ts
@@ -32,11 +32,24 @@ export class StickySidebar implements OnInit, OnDestroy {
   }
 
   updatePosition() {
+    var stuck = false;
     if ( this.scrollY + this.scrollYOffset() >= this.$redocEl.offsetTop) {
       this.stick();
+      stuck = true;
     } else {
       this.unstick();
     }
+
+    if ( this.scrollY + window.innerHeight -  this.scrollYOffset() >= this.$redocEl.scrollHeight) {
+      this.stickBottom();
+      stuck = true;
+    } else {
+      this.unstickBottom();
+    }
+
+    if (!stuck) {
+      DOM.setStyle(this.$element, 'position', 'absolute');
+    }
   }
 
   stick() {
@@ -45,19 +58,33 @@ export class StickySidebar implements OnInit, OnDestroy {
   }
 
   unstick() {
-    DOM.setStyle(this.$element, 'position', 'absolute');
     DOM.setStyle(this.$element, 'top', '0');
   }
 
+  stickBottom() {
+    DOM.setStyle(this.$element, 'position', 'fixed');
+    var offset = this.scrollY + this.scrollParentHeight - (this.$redocEl.scrollHeight + this.$redocEl.offsetTop);
+    DOM.setStyle(this.$element, 'bottom', offset + 'px');
+  }
+
+  unstickBottom() {
+    DOM.setStyle(this.$element, 'bottom', '0');
+  }
+
   get scrollY() {
     return (this.scrollParent.pageYOffset != undefined) ? this.scrollParent.pageYOffset : this.scrollParent.scrollTop;
   }
 
+  get scrollParentHeight() {
+    return (this.scrollParent.innerHeight != undefined) ? this.scrollParent.innerHeight : this.scrollParent.clientHeight;
+  }
+
   ngOnInit() {
     // FIXME use more reliable code
     this.$redocEl = this.$element.offsetParent.parentNode || DOM.defaultDoc().body;
     this.bind();
-    this.updatePosition();
+    setTimeout(() => this.updatePosition());
+    //this.updatePosition()
   }
 
   ngOnDestroy() {