feat(sidebar): use HC-Sticky plugin

https://github.com/somewebmedia/hc-sticky/

README.md

@@ -74,3 +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)

assets/scss/partials/sidebar.scss

@@ -39,7 +39,6 @@
 .right-sidebar {
     flex-shrink: 0;
     display: none;
-    height: 100vh;
 
     &.sticky {
         top: 0;
@@ -50,6 +49,11 @@
     }
 }
 
+/// 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
 
-StickyScroller:
+HCSticky:
-    - src: https://cdn.jsdelivr.net/npm/sticky-scroller@0.4.0/dist/sticky-scroller.js
+    - src: https://cdn.jsdelivr.net/npm/hc-sticky@2.2.7/dist/hc-sticky.js
-      integrity: sha256-OrppYVDkQVJpB/pb96X+9JStPPGpgHWhheQbgKy5EPI=
+      integrity: sha256-ZQb/nC8ArgZEjGauwabpmi57wvKmjsuXZbFcIKw4G/Y=
       type: script
       defer: true

layouts/partials/footer/components/script.html

@@ -1,10 +1,15 @@
 {{- partial "helper/external" (dict "Context" . "Namespace" "Vibrant") -}}
 
-{{- partial "helper/external" (dict "Context" . "Namespace" "StickyScroller") -}}
+{{- partial "helper/external" (dict "Context" . "Namespace" "HCSticky") -}}
 <script>
     window.addEventListener("load", () => {
         const rightSiderbar = document.querySelector(".right-sidebar");
-        if (rightSiderbar) new StickyScroller(rightSiderbar);
+        if (rightSiderbar) {
+            new hcSticky(".right-sidebar", {
+                stickTo: '.main-container',
+                stickyClass: 'js-sticked'
+            });
+        }
     })
 </script>