Merge pull request #8 from key-amb/develop

Improve: fix sidebar position for single page

4 files changed, 41 insertions, 0 deletions

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index f29ed54..a1e5f67 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -30,6 +30,7 @@
 <script src="{{ $baseUrl }}/js/highlight.pack.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>
 <script src="{{ $baseUrl }}/js/ie10-viewport-bug-workaround.js"></script>
+<script src="{{ $baseUrl }}/js/bootie-docs.js"></script>
 
 </body>
 </html>
diff --git a/layouts/partials/sidebar-single.html b/layouts/partials/sidebar-single.html
index 4a0c3ae..81988cf 100644
--- a/layouts/partials/sidebar-single.html
+++ b/layouts/partials/sidebar-single.html
@@ -1,5 +1,6 @@
 {{ $baseUrl := .Site.BaseURL }}
 <div class="col-sm-3 col-sm-offset-1 doc-sidebar">
+	<div id="sidebar">
 	<div class="sidebar-module">
 		<div class="sidebar-toc">
 			<h4>Table of Contents</h4>
@@ -17,4 +18,5 @@
 		{{ end }}
 		</div>
 	</div>
+	</div>
 </div><!-- /.doc-sidebar -->
\ No newline at end of file
diff --git a/static/css/bootie-docs.css b/static/css/bootie-docs.css
index e8daa71..a39f74f 100644
--- a/static/css/bootie-docs.css
+++ b/static/css/bootie-docs.css
@@ -68,6 +68,14 @@ h2, .h2 {
   font-size: 80%;
 }
 
+/*
+ * Sidebar
+ */
+
+div#sidebar {
+  position: fixed;
+}
+
 /* Sidebar modules for boxing content */
 .sidebar-module {
   padding: 15px;
diff --git a/static/js/bootie-docs.js b/static/js/bootie-docs.js
new file mode 100644
index 0000000..6dc000b
--- /dev/null
+++ b/static/js/bootie-docs.js
@@ -0,0 +1,30 @@
+window.onload = function() {
+  var headHeight  = $("nav").height();
+  var mainHeight = $("main").height();
+  var sideHeight = $("#sidebar").height();
+  var footHeight  = $("footer").height();
+  var totalHeight   = headHeight + mainHeight + footHeight;
+  var w = $(window);
+
+  if (sideHeight > 0 && sideHeight < mainHeight) {
+    $(".doc-sidebar").css("height", mainHeight);
+    var sideNode = $("#sidebar");
+    var scrollStart = 0;
+    var scrollStop  = headHeight + mainHeight - sideHeight;
+
+    w.scroll(function() {
+      if (w.scrollTop() <= scrollStart) {
+        sideNode.css({"position": "fixed"});
+      } else if (scrollStart < w.scrollTop() && w.scrollTop() < scrollStop) {
+        sideNode.css({"position": "fixed", "top": headHeight + "px"});
+      } else if (w.scrollTop() >= scrollStop) {
+        var topNext
+          = headHeight - (headHeight + sideHeight)
+            * (w.scrollTop() - scrollStop) / (totalHeight - scrollStop);
+        sideNode.css({
+          "position": "fixed", "top": topNext + "px", "bottom": footHeight + "px"
+        });
+      }
+    });
+  } 
+}
\ No newline at end of file