⚡ 优化侧边栏的滚动

Scarfwwz · Feb 9, 2022 · 4a7294b · 4a7294b
1 parent 3311abe
commit 4a7294b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 24 deletions.
diff --git a/layout/post.ejs b/layout/post.ejs
@@ -6,7 +6,7 @@ page.banner_mask_alpha = page.banner_mask_alpha || theme.post.banner_mask_alpha
 
 <div class="container-fluid nopadding-x">
   <div class="row nomargin-x">
-    <div class="d-none d-lg-block col-lg-2">
+    <div class="side-col d-none d-lg-block col-lg-2">
       <%- inject_point('postLeft') %>
     </div>
 
@@ -78,7 +78,7 @@ page.banner_mask_alpha = page.banner_mask_alpha || theme.post.banner_mask_alpha
       </div>
     </div>
 
-    <div class="d-none d-lg-block col-lg-2">
+    <div class="side-col d-none d-lg-block col-lg-2">
       <%- inject_point('postRight') %>
     </div>
   </div>

diff --git a/source/css/_pages/_base/_widget/category_bar.styl b/source/css/_pages/_base/_widget/category_bar.styl
@@ -2,10 +2,6 @@
   height 100%
 
   .category-list
-    position -webkit-sticky
-    position sticky
-    top 2rem
-    padding 3rem 0 0 0
     max-height 85vh
     overflow-y auto
     overflow-x hidden

diff --git a/source/css/_pages/_base/_widget/toc.styl b/source/css/_pages/_base/_widget/toc.styl
@@ -1,8 +1,4 @@
 #toc
-  position -webkit-sticky
-  position sticky
-  top 2rem
-  padding 3rem 0 0 0
   visibility hidden
 
 .toc-header
@@ -69,9 +65,6 @@
     transition height .1s ease-in-out, margin .1s ease-in-out, visibility .1s ease-in-out
 
 .sidebar
-  height 100%
-
-@media (max-width: 1024px)
-  .sidebar
-    padding-left 0
-    padding-right 0
+  position sticky
+  top 2rem
+  padding 3rem 0
diff --git a/source/js/events.js b/source/js/events.js
@@ -45,19 +45,19 @@ Fluid.events = {
       return;
     }
     var parallax = function() {
-      var oVal = jQuery(window).scrollTop() / 5;
+      var pxv = jQuery(window).scrollTop() / 5;
       var offset = parseInt(board.css('margin-top'), 10);
       var max = 96 + offset;
-      if (oVal > max) {
-        oVal = max;
+      if (pxv > max) {
+        pxv = max;
       }
       ph.css({
-        transform: 'translate3d(0,' + oVal + 'px,0)'
+        transform: 'translate3d(0,' + pxv + 'px,0)'
       });
-      var sidebar = jQuery('.sidebar');
-      if (sidebar) {
-        sidebar.css({
-          'padding-top': oVal + 'px'
+      var sideCol = jQuery('.side-col');
+      if (sideCol) {
+        sideCol.css({
+          'padding-top': pxv + 'px'
         });
       }
     };