fix: toc auto scroll

wangchucheng · Nov 15, 2020 · 96741f4 · 96741f4
1 parent afb8813
commit 96741f4
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 18 deletions.
diff --git a/assets/css/site.css b/assets/css/site.css
@@ -1,5 +1,5 @@
 .sticky-toc {
-  @apply sticky z-0 ease-in-out duration-300;
+  @apply sticky top-32 z-0 ease-in-out duration-300;
 }
 
 .sticky-toc a {

diff --git a/assets/js/eureka.js b/assets/js/eureka.js
@@ -42,7 +42,7 @@ function enableStickyToc() {
             firstElement.firstChild.classList.add(textColor)
             let offset = firstElement.offsetTop - targetPos;
             if (offset > 0) {
-                document.querySelector(`.sticky-toc`).style.top = `calc( 7rem - ${offset}px)`
+                document.querySelector(`.sticky-toc`).style.top = `calc( 8rem - ${offset}px)`
             } else {
                 document.querySelector(`.sticky-toc`).removeAttribute("style");
             }

diff --git a/layouts/partials/doc_layout.html b/layouts/partials/doc_layout.html
@@ -41,7 +41,7 @@ <h1 class="font-bold text-3xl text-primary-text">{{ .Title }}</h1>
                 {{ if $hasSidebar}}
                 <div class="hidden lg:block lg:w-1/4">
                     {{ if ne $hasToc false }}
-                    {{ partial "doc_toc.html" . }}
+                    {{ partial "post_toc.html" . }}
                     {{ end }}
                 </div>
                 {{ end }}

diff --git a/layouts/partials/doc_toc.html b/layouts/partials/doc_toc.html
diff --git a/layouts/partials/post_toc.html b/layouts/partials/post_toc.html
@@ -1,7 +1,7 @@
-<div class="sticky top-16 z-10 text-lg font-semibold bg-primary-bg hidden lg:block px-6 py-4">
-    <h2 class="subtitle">{{ i18n "toc" }}</h2>
+<div class="sticky top-16 z-10 hidden lg:block px-6 py-4 {{ if eq .Type "docs" }} bg-secondary-bg pt-16 -mt-16 {{ else }} bg-primary-bg {{ end }}">
+    <span class="text-lg font-semibold">{{ i18n "onThisPage" }}</span>
 </div>
-<div class="sticky-toc top-32 hidden lg:block px-6 pb-6">
+<div class="sticky-toc hidden lg:block px-6 pb-6 {{ if eq .Type "docs" }} pt-10 -mt-10 border-l {{ end }}">
     {{ .TableOfContents }}
 </div>
 <script>