floating sidebar

4 files changed, 44 insertions, 2 deletions

diff --git a/weblog/apps.py b/weblog/apps.py
index f7c3cbf..2c094ee 100755
--- a/weblog/apps.py
+++ b/weblog/apps.py
@@ -14,6 +14,7 @@ SETTINGS = {
     'posts_per_page': 10,
     'dynamic_load': False,
     'infinite_load': False,
+    'floating_sidebar': False,
     'enable_rss': True,
 }
 
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){
diff --git a/weblog/templates/weblog/weblog.html b/weblog/templates/weblog/weblog.html
index 035ca20..e1907c6 100755
--- a/weblog/templates/weblog/weblog.html
+++ b/weblog/templates/weblog/weblog.html
@@ -21,7 +21,10 @@
         {% endblock %}
     </div>
     {% if show_sidebar %}
-    <div class="weblog-sidebar">
+    {% if floating_sidebar %}
+    <div class="sidebar-filler hidden"></div>
+    {% endif %}
+    <div class="weblog-sidebar{% if floating_sidebar %} floating-sidebar{% endif %}">
         {% if show_categories %}
         {% if category %}
         {% if category == 'misc' %}
@@ -39,4 +42,15 @@
     </div>
     {% endif %}
 </div>
+{% if floating_sidebar %}
+    <script>
+        window.addEventListener("load", function(){
+            var sb_width = document.querySelector(".weblog-sidebar.floating-sidebar").offsetWidth;
+            var sidebar_filler = document.querySelector(".sidebar-filler");
+            sidebar_filler.style.width = sb_width+"px";
+            sidebar_filler.style.height = "10px";
+            window.addEventListener("scroll", floatSidebar);
+        });
+    </script>
+{% endif %}
 {% endblock %}