refactor: header code refactor

source/css/layout/_partial/first-screen.styl

@@ -10,14 +10,14 @@ $first-screen-img = $temp-img ? $temp-img:'/images/bg.svg';
   width: 100%;
   overflow: hidden;
   background: url($first-screen-img) center center / cover no-repeat;
-  background-position-y: $header-height - 2px;
+  background-position-y: $header-height - $header-progress-height;
 
   +keep-tablet() {
-    background-position-y: $header-height * 0.9 - 2px;
+    background-position-y: $header-height * 0.9 - $header-progress-height;
   }
 
   +keep-mobile() {
-    background-position-y: $header-height * 0.8 - 2px;
+    background-position-y: $header-height * 0.8 - $header-progress-height;
   }
 
   .content {

source/css/layout/_partial/header.styl

@@ -1,4 +1,3 @@
-$header-progress-height = 2.8px;
 $logo-title-font-size = 2.2rem;
 $pc-search-icon-font-size = 1.5rem;
 $menu-bar-line-height = 2.5px;
@@ -12,6 +11,7 @@ $menu-bar-line-height = 2.5px;
   justify-content: center;
   background: var(--background-color);
   padding-top: $header-progress-height;
+  transition();
 
   hover-style(1.02, 1.02);
 
@@ -42,6 +42,13 @@ $menu-bar-line-height = 2.5px;
     .left {
       display: flex;
       align-items: center;
+      transition();
+
+      .header-shrink & {
+        transform: scale(0.85);
+        transform-origin: left;
+        transition();
+      }
 
       .logo-title {
         font-size: $logo-title-font-size;
@@ -64,6 +71,7 @@ $menu-bar-line-height = 2.5px;
     .right {
 
       .pc {
+
         .menu-list {
           display: flex;
           align-items: center;
@@ -84,31 +92,11 @@ $menu-bar-line-height = 2.5px;
               margin-left: 0;
             }
 
-            a {
 
-              &:hover {
+            a:hover, .active {
-
-                color: var(--default-text-color);
-
-                &::after {
-                  content: '';
-                  position: absolute;
-                  bottom: -10px;
-                  left: 50%;
-                  width: 100%;
-                  height: 2px;
-                  transform: translateX(-50%);
-                  background: var(--primary-color);
-                }
-              }
-
-            }
-
-
-            .active {
-              color: var(--second-text-color);
 
               &::after {
+                transition();
                 content: '';
                 position: absolute;
                 bottom: -10px;
@@ -116,11 +104,15 @@ $menu-bar-line-height = 2.5px;
                 width: 100%;
                 height: 2px;
                 transform: translateX(-50%);
-                background: var(--primary-color)
+                background: var(--primary-color);
+
+                .header-shrink & {
+                  transition();
+                  bottom: -($header-shrink-height / 2 - 12);
+                }
               }
             }
 
-
             &.search {
               font-size: $pc-search-icon-font-size;
               margin-left: 26px;
@@ -132,6 +124,7 @@ $menu-bar-line-height = 2.5px;
 
       }
 
+
       .mobile {
         display: flex;
         justify-content: space-between;
@@ -166,10 +159,14 @@ $menu-bar-line-height = 2.5px;
             background: var(--default-text-color);
             transition();
 
-            &::before {
+            .header-drawer-show & {
+              transition();
+              background: transparent;
+            }
+
+            &::before, &::after {
               content: '';
               position: absolute;
-              top: -6px;
               left: 0;
               width: 100%;
               height: $menu-bar-line-height;
@@ -177,15 +174,22 @@ $menu-bar-line-height = 2.5px;
               transition();
             }
 
+
+            &::before {
+              top: -6px;
+
+              .header-drawer-show & {
+                transform: translateY(6px) rotate(45deg);
+              }
+            }
+
+
             &::after {
-              content: '';
-              position: absolute;
               bottom: -6px;
-              left: 0;
+
-              width: 100%;
+              .header-drawer-show & {
-              height: $menu-bar-line-height;
+                transform: translateY(-6px) rotate(-45deg);
-              background: var(--default-text-color);
+              }
-              transition();
             }
           }
         }
@@ -204,9 +208,13 @@ $menu-bar-line-height = 2.5px;
     transform-origin: top;
     background: var(--background-color);
     z-index: $z-index-2;
-
     transition();
 
+    .header-drawer-show & {
+      transition();
+      transform: scaleY(1);
+    }
+
     .drawer-menu-list {
       display: flex;
       flex-direction: column;
@@ -252,90 +260,16 @@ $menu-bar-line-height = 2.5px;
     visibility: hidden;
     opacity: 0;
     transition();
-  }
 
-}
+    .header-drawer-show & {
-
+      visibility: visible;
-
+      opacity: 1;
-.header-drawer-show {
-  opacity: 1 !important;
-
-  .header-content {
-
-    .right {
-      .mobile {
-        .menu-bar {
-          .menu-bar-middle {
-
-            background: transparent;
-
-            &::before {
-              transform: translateY(6px) rotate(45deg);
-            }
-
-
-            &::after {
-              transform: translateY(-6px) rotate(-45deg);
-            }
-          }
-        }
-      }
-
-    }
-  }
-
-  .header-drawer {
-    transform: scaleY(1);
-  }
-
-  .window-mask {
-    visibility: visible;
-    opacity: 1;
-  }
-
-}
-
-
-.header-wrapper-shrink {
-
-  .header-content {
-
-    .left {
-      transform: scale(0.86);
-      transform-origin: left;
       transition();
     }
-
-    .right {
-
-      .pc {
-
-        .menu-list {
-
-          .menu-item {
-
-            a:hover {
-              &::after {
-                transition();
-                bottom: -($header-shrink-height / 2 - 12);
-              }
-            }
-
-            .active::after {
-              transition();
-              bottom: -($header-shrink-height / 2 - 12);
-            }
-          }
-
-        }
-      }
-    }
-
-
   }
 
-
+}
-  .header-drawer {
+
-    padding: $header-shrink-height 0 20px 0;
+.header-drawer-show {
-  }
+  overflow: hidden;
 }

source/css/layout/common/variables.styl

@@ -7,6 +7,7 @@
 // ========================================================================
 $header-height = 76px;                          // 头部默认高度
 $header-shrink-height = $header-height * 0.8;   // 头部收缩高度
+$header-progress-height = 2.8px;                // 头部进度条高度
 $main-content-width = 80%;                      // 中间内容区域宽度（PC）
 $main-content-width-tablet = 85%;               // 中间内容区域宽度（平板）
 $main-content-width-mobile = 90%;               // 中间内容区域宽度（手机）

source/css/layout/page.styl

@@ -1,4 +1,3 @@
-$header-progress-height = 2.8px;
 $temp-width = hexo-config('style.left_side_width');
 $page-aside-width = $temp-width ? convert($temp-width):260px;
 
@@ -34,12 +33,25 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
       padding-top: $header-height;
       position: relative;
 
+      .header-shrink & {
+        padding-top: $header-shrink-height;
+        transition();
+
+        +keep-tablet() {
+          padding-top: $header-shrink-height * 0.9;
+        }
+
+        +keep-mobile() {
+          padding-top: $header-shrink-height * 0.8;
+        }
+      }
+
       +keep-tablet() {
-        padding-top: $header-height - 8px;
+        padding-top: $header-height * 0.9;
       }
 
       +keep-mobile() {
-        padding-top: $header-height - 16px;
+        padding-top: $header-height * 0.8;
       }
 
       .page-main-content-top {
@@ -48,22 +60,35 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
         right: 0;
         width: 100%;
         height: $header-height;
+        z-index: $z-index-5;
+        box-sizing: border-box;
+        transition();
+
+        .header-shrink & {
+          height: $header-shrink-height;
+
+          +keep-tablet() {
+            height: $header-shrink-height * 0.9;
+          }
+
+          +keep-mobile() {
+            height: $header-shrink-height * 0.8;
+          }
+        }
+
 
         +keep-tablet() {
           height: $header-height * 0.9;
           padding-left: 0 !important;
         }
 
+
         +keep-mobile() {
           height: $header-height  * 0.8;
         }
 
-        z-index: $z-index-5;
-        box-sizing: border-box;
-        transition();
       }
 
-
       .page-main-content-middle {
         box-sizing: border-box;
         width: 100%;
@@ -103,33 +128,6 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
         width: 100%;
       }
     }
-
-
-    .page-main-content-top-shrink {
-      padding-top: $header-shrink-height;
-      transition();
-
-      +keep-tablet() {
-        padding-top: $header-shrink-height * 0.9;
-      }
-
-      +keep-mobile() {
-        padding-top: $header-shrink-height * 0.8;
-      }
-
-      .page-main-content-top {
-        height: $header-shrink-height;
-
-        +keep-tablet() {
-          height: $header-shrink-height * 0.9;
-        }
-
-        +keep-mobile() {
-          height: $header-shrink-height * 0.8;
-        }
-      }
-
-    }
   }
 
 
@@ -161,7 +159,7 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
     right: $component-interspace;
     transition();
 
-    &.shrink {
+    .header-shrink & {
       top: $header-shrink-height + $component-interspace;
 
       +keep-tablet() {
@@ -173,6 +171,7 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
       }
     }
 
+
     +keep-tablet() {
       top: $header-height * 0.9 + $component-interspace;
       right: 10px;
@@ -180,18 +179,18 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
       transform-origin: right top;
     }
 
+
     +keep-mobile() {
       top: $header-height * 0.8 + $component-interspace;
       right: 5px;
       transform: scale(0.72);
-      transform-origin: right top;
     }
   }
 
 
   .right-bottom-side-tools {
     position: fixed;
-    bottom: $component-interspace;
+    bottom: 5%;
     right: 0;
   }
 }

source/js/header-shrink.js

@@ -1,47 +1,34 @@
 KEEP.initHeaderShrink = () => {
   KEEP.utils.headerShrink = {
-
-    pageTemplateDom: document.querySelector('.page-main-content'),
     headerDom: document.querySelector('.header-wrapper'),
-    sidebarToolsDom: document.querySelector('.sidebar-tools'),
     isHeaderShrink: false,
-    isShowHeaderDrawer: false,
 
     init() {
       this.headerHeight = this.headerDom.getBoundingClientRect().height;
     },
 
     headerShrink() {
-
       const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
 
       if (!this.isHeaderShrink && scrollTop > this.headerHeight) {
         this.isHeaderShrink = true;
-        this.headerDom.classList.add('header-wrapper-shrink');
+        document.body.classList.add('header-shrink');
-        this.pageTemplateDom.classList.add('page-main-content-top-shrink');
-        this.sidebarToolsDom && this.sidebarToolsDom.classList.add('shrink');
       } else if (this.isHeaderShrink && scrollTop <= this.headerHeight) {
         this.isHeaderShrink = false;
-        this.headerDom.classList.remove('header-wrapper-shrink');
+        document.body.classList.remove('header-shrink');
-        this.pageTemplateDom.classList.remove('page-main-content-top-shrink');
-        this.sidebarToolsDom && this.sidebarToolsDom.classList.remove('shrink');
       }
 
     },
 
     initMenuBarButton() {
       document.querySelector('.menu-bar').addEventListener('click', () => {
-        this.isShowHeaderDrawer = !this.isShowHeaderDrawer;
+        document.body.classList.toggle('header-drawer-show');
-        document.body.style.overflow = this.isShowHeaderDrawer ? 'hidden' : 'auto';
-        this.headerDom.classList.toggle('header-drawer-show');
       });
     },
 
     initWindowMask() {
       document.querySelector('.window-mask').addEventListener('click', () => {
-        this.isShowHeaderDrawer = !this.isShowHeaderDrawer;
+        document.body.classList.toggle('header-drawer-show');
-        document.body.style.overflow = this.isShowHeaderDrawer ? 'hidden' : 'auto';
-        this.headerDom.classList.toggle('header-drawer-show');
       });
     },
   }