From d49d9569ec274253271ebda0b7a182762f695c8e Mon Sep 17 00:00:00 2001
From: Jimmy <jimmehcai@gmail.com>
Date: Fri, 25 Jun 2021 20:44:58 +0200
Subject: [PATCH] feat: sticky sidebar

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/236
---
 assets/scss/partials/layout/article.scss       | 2 +-
 assets/scss/partials/sidebar.scss              | 1 +
 data/external.yaml                             | 6 ++++++
 layouts/partials/footer/components/script.html | 8 ++++++++
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 618ca54..e9b9c1b 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -128,7 +128,7 @@
 
         @include respond(xl) {
             display: block;
-            top: var(--main-top-padding);
+            padding-top: var(--main-top-padding);
         }
     }
 
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index 462729d..0cfda0e 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -39,6 +39,7 @@
 .right-sidebar {
     flex-shrink: 0;
     display: none;
+    height: 100vh;
 
     &.sticky {
         top: 0;
diff --git a/data/external.yaml b/data/external.yaml
index 2721e76..6ccf9e1 100644
--- a/data/external.yaml
+++ b/data/external.yaml
@@ -36,3 +36,9 @@ KaTeX:
       integrity: sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa
       type: script
       defer: true
+
+StickyScroller:
+    - src: https://cdn.jsdelivr.net/npm/sticky-scroller@0.4.0/dist/sticky-scroller.js
+      integrity: sha256-OrppYVDkQVJpB/pb96X+9JStPPGpgHWhheQbgKy5EPI=
+      type: script
+      defer: true
diff --git a/layouts/partials/footer/components/script.html b/layouts/partials/footer/components/script.html
index 83522ff..4deef8a 100644
--- a/layouts/partials/footer/components/script.html
+++ b/layouts/partials/footer/components/script.html
@@ -1,5 +1,13 @@
 {{- partial "helper/external" (dict "Context" . "Namespace" "Vibrant") -}}
 
+{{- partial "helper/external" (dict "Context" . "Namespace" "StickyScroller") -}}
+<script>
+    window.addEventListener("load", () => {
+        const rightSiderbar = document.querySelector(".right-sidebar");
+        if (rightSiderbar) new StickyScroller(rightSiderbar);
+    })
+</script>
+
 {{- $opts := dict "minify" hugo.IsProduction -}}
 {{- $script := resources.Get "ts/main.ts" | js.Build $opts -}}