floating sidebar

2 files changed, 28 insertions, 1 deletions

diff --git a/weblog/static/weblog/css/weblog.css b/weblog/static/weblog/css/weblog.css
index 201dbdf..cd94bd8 100755
--- a/weblog/static/weblog/css/weblog.css
+++ b/weblog/static/weblog/css/weblog.css
@@ -92,7 +92,7 @@ hr{
 .navbar-brand, .navbar-brand:visited{
     font-family: Georgia, serif;
     color: #dedede;
-    font-size: 1.5em;
+    font-size: 2em;
 }
 
 .weblog-categories,
@@ -251,6 +251,16 @@ hr{
     padding-bottom: 3em;
 }
 
+.weblog-sidebar.floating-sidebar{
+    position: static;
+    height: min-content;
+}
+
+.weblog-sidebar.floating-sidebar.float{
+    position: fixed;
+    top: 0;
+}
+
 .post-author{
     font-style: italic;
 }
diff --git a/weblog/static/weblog/js/weblog.js b/weblog/static/weblog/js/weblog.js
index ff72827..654fb4a 100755
--- a/weblog/static/weblog/js/weblog.js
+++ b/weblog/static/weblog/js/weblog.js
@@ -12,6 +12,23 @@ function toggleNode(caller){
     target.classList.toggle('show');
 }
 
+function floatSidebar(){
+    var sidebar = document.querySelector(".weblog-sidebar.floating-sidebar");
+    var sidebar_filler = document.querySelector(".sidebar-filler");
+    var blog_content = document.querySelector(".blog-content");
+    var offset = document.querySelector("nav").offsetHeight +
+        document.querySelector(".breadcrumb").offsetHeight;
+    if((document.body.scrollTop > offset || document.documentElement.scrollTop > offset)){
+        sidebar.classList.add("float");
+        sidebar.style.left = blog_content.offsetLeft + blog_content.offsetWidth + "px";
+        sidebar_filler.classList.remove("hidden");
+    }
+    else{
+        sidebar.classList.remove("float");
+        sidebar_filler.classList.add("hidden");
+    }
+}
+
 function loadBlogPosts(url, page = 2, isinfinite = false){
     var req = new XMLHttpRequest();
     function insert(response, isinfinite){