feat: sticky sidebar

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/236

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);
         }
     }
 

assets/scss/partials/sidebar.scss

@@ -39,6 +39,7 @@
 .right-sidebar {
     flex-shrink: 0;
     display: none;
+    height: 100vh;
 
     &.sticky {
         top: 0;

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

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 -}}