fix(ui): slow script loading hides TOC fade-up effect in desktop

cotes2020 · Dec 15, 2024 · 1ec361f · 1ec361f
1 parent 2f00d41
commit 1ec361f
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/_sass/pages/_post.scss b/_sass/pages/_post.scss
@@ -220,14 +220,11 @@ header {
 @-webkit-keyframes fade-up {
   from {
     opacity: 0;
-    position: relative;
-    top: 2rem;
+    margin-top: 4rem;
   }
 
   to {
     opacity: 1;
-    position: relative;
-    top: 0;
   }
 }
 
@@ -247,6 +244,7 @@ header {
 %top-cover {
   content: '';
   display: block;
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   width: 100%;
@@ -257,13 +255,16 @@ header {
 #toc-wrapper {
   top: 0;
   transition: top 0.2s ease-in-out;
-  -webkit-animation: fade-up 0.8s;
-  animation: fade-up 0.8s;
   overflow-y: auto;
   max-height: 100vh;
   scrollbar-width: none;
   margin-top: 2rem;
 
+  &:not(.invisible) {
+    -webkit-animation: fade-up 0.8s;
+    animation: fade-up 0.8s;
+  }
+
   ul {
     list-style: none;
     font-size: 0.85rem;