feat(sidebar): sticky sidebar using vursen/FloatSidebar.js

README.md

@@ -74,4 +74,4 @@ Your support is greatly appreciated :)
   - [MunifTanjim/minimo](https://github.com/MunifTanjim/minimo)
   - [lepture/yue.css](https://github.com/lepture/yue.css)
   - Markdown gallery syntax from [Typlog](https://typlog.com/)
-  - [somewebmedia/hc-sticky](https://github.com/somewebmedia/hc-sticky)
+  - [vursen/FloatSidebar.js](https://github.com/vursen/FloatSidebar.js)

assets/scss/partials/sidebar.scss

@@ -39,6 +39,10 @@
 .right-sidebar {
     flex-shrink: 0;
     display: none;
+    
+    /// Take full max-width, set in grid.scss
+    width: 100%;
+    position: relative;
 
     &.sticky {
         top: 0;
@@ -49,11 +53,6 @@
     }
 }
 
-/// For HC Sticky plugin, since it doesn't provide a option to customize class name
-.sticky-spacer {
-    max-width: var(--right-sidebar-max-width);
-}
-
 .site-info {
     z-index: 1;
     transition: box-shadow 0.5s ease;

data/external.yaml

@@ -37,8 +37,8 @@ KaTeX:
       type: script
       defer: true
 
-HCSticky:
-    - src: https://cdn.jsdelivr.net/npm/hc-sticky@2.2.7/dist/hc-sticky.js
-      integrity: sha256-ZQb/nC8ArgZEjGauwabpmi57wvKmjsuXZbFcIKw4G/Y=
+FloatSidebar:
+    - src: https://cdn.jsdelivr.net/npm/float-sidebar@1.2.3/dist/float-sidebar.min.js
+      integrity: sha256-mOZMic3UnZLVOJXhVOhJ2zGsyrGHEQ3LVT5O98ya9kI=
       type: script
       defer: true

layouts/_default/single.html

@@ -42,16 +42,18 @@
 {{ define "right-sidebar" }}
     {{ if (.Scratch.Get "hasTOC") }}
         <aside class="sidebar right-sidebar sticky">
-            <section class="widget archives">
-                <div class="widget-icon">
-                    {{ partial "helper/icon" "hash" }}
-                </div>
-                <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
-                
-                <div class="widget--toc">
-                    {{ .TableOfContents }}
-                </div>
-            </section>
+            <div class="sidebar__inner">
+                <section class="widget">
+                    <div class="widget-icon">
+                        {{ partial "helper/icon" "hash" }}
+                    </div>
+                    <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
+                    
+                    <div class="widget--toc">
+                        {{ .TableOfContents }}
+                    </div>
+                </section>
+            </div>
         </aside>
     {{ end }}
 {{ end }}

layouts/partials/footer/components/script.html

@@ -1,17 +1,5 @@
 {{- partial "helper/external" (dict "Context" . "Namespace" "Vibrant") -}}
-
-{{- partial "helper/external" (dict "Context" . "Namespace" "HCSticky") -}}
-<script>
-    window.addEventListener("load", () => {
-        const rightSiderbar = document.querySelector(".right-sidebar");
-        if (rightSiderbar) {
-            new hcSticky(".right-sidebar", {
-                stickTo: '.main-container',
-                stickyClass: 'js-sticked'
-            });
-        }
-    })
-</script>
+{{- partial "footer/components/sticky-sidebar" . -}}}
 
 {{- $opts := dict "minify" hugo.IsProduction -}}
 {{- $script := resources.Get "ts/main.ts" | js.Build $opts -}}

layouts/partials/footer/components/sticky-sidebar.html

@@ -0,0 +1,31 @@
+{{- partial "helper/external" (dict "Context" . "Namespace" "FloatSidebar") -}}
+
+<script>
+    window.addEventListener("load", () => {
+        const rightSiderbar = document.querySelector(".right-sidebar");
+        const mainContainer = document.querySelector(".main-container");
+        const rightSidebarInner = rightSiderbar.querySelector(".sidebar__inner");
+        const padding = window.getComputedStyle(document.documentElement).getPropertyValue('--main-top-padding').replace('px', '');
+
+        if (rightSiderbar) {
+            const floatSidebar = FloatSidebar({
+                sidebar: rightSiderbar,
+                relative: mainContainer,
+                sidebarInner: rightSidebarInner,
+                topSpacing: padding,
+                bottomSpacing: padding
+            });
+
+            const updateMaxWidth = () => {
+                rightSidebarInner.style.maxWidth = `${rightSiderbar.offsetWidth}px`;
+            }
+            updateMaxWidth();
+
+            /**
+                Because the right sidebar does not have a fixed width,
+                we need to update the max-width of the sidebarInner when the window is resized.
+            */
+            window.addEventListener("resize", updateMaxWidth);
+        }
+    })
+</script>

layouts/partials/sidebar/right.html

@@ -1,8 +1,10 @@
 {{ if .Site.Params.widgets.enabled }}
     {{ $context := . }}
-    <aside class="sidebar right-sidebar sticky">
-        {{ range $widget := .Site.Params.widgets.enabled }}
-            {{ partial (printf "widget/%s" $widget) $context }}
-        {{ end }}
+    <aside class="sidebar right-sidebar">
+        <div class="sidebar__inner">
+            {{ range $widget := .Site.Params.widgets.enabled }}
+                {{ partial (printf "widget/%s" $widget) $context }}
+            {{ end }}
+        </div>
     </aside>
 {{ end }}