feat(header): optimize transparent background style when scroll (#62)

layout/_partial/header.ejs

@@ -1,11 +1,12 @@
-<header class="header-wrapper">
 <%
 const { title: bi_title, logo_img: bi_logo_img } = theme.base_info
-      const { logo: s_logo } = theme.style
+const { logo: s_logo, first_screen: s_first_screen } = theme.style
+const { enable: s_fs_enable, header_transparent: s_fs_header_transparent } = s_first_screen
 const { title: config_title } = config
 %>
+<header class="header-wrapper<%= is_home() && s_fs_header_transparent ? ' transparent-1' : '' %>">
 
-    <div class="header-content<%- (theme.style.first_screen.enable === true && is_home() && !page.prev) ? ' has-first-screen' : '' %>">
+    <div class="header-content<%- (s_fs_enable === true && is_home() && !page.prev) ? ' has-first-screen' : '' %>">
         <div class="left">
             <% if (s_logo || bi_logo_img) { %>
                 <a class="logo-image" href="/">

layout/page.ejs

@@ -5,7 +5,7 @@
         <%- partial('_partial/first-screen') %>
     <% } %>
 
-    <div class="page-main-content">
+    <div class="page-main-content<%= is_home() ? ' home' : '' %>">
 
         <div class="page-main-content-top">
             <%- partial('_partial/header') %>

scripts/helpers/export-config.js

@@ -1,5 +1,4 @@
 /* global hexo */
-
 'use strict';
 
 const url = require('url');
@@ -12,7 +11,7 @@ const yaml = require('js-yaml');
  */
 hexo.extend.helper.register('export_config', function () {
 
-  let {config, theme} = this;
+  const { config, theme } = this;
 
   // ------------------------ export language to js ------------------------
   const languageDir = path.join(__dirname, '../../languages');
@@ -45,7 +44,7 @@ hexo.extend.helper.register('export_config', function () {
     side_tools: theme.side_tools,
     pjax: theme.pjax,
     lazyload: theme.lazyload,
-    version: theme.version,
+    version: theme.version
   }
 
   return `<script id="hexo-configurations">

source/css/common/variables.styl

@@ -1,11 +1,11 @@
-// ========================================================================================
+// ==============================================================================================
 //                                     KEEP THEME VARIABLE                                     //
-// ========================================================================================
+// ==============================================================================================
 
 
-// ========================================================================================
+// ==============================================================================================
 // layout
-// ========================================================================================
+// ==============================================================================================
 $header-height = 70px;                                           // header height
 $header-shrink-height = $header-height * 0.72;                   // header shrink height
 $scroll-progress-bar-height = 2px;                               // scroll progress bar height
@@ -20,9 +20,9 @@ $temp-content-max-width = hexo-config('style.content_max_width');
 $content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px;
 
 
-// ========================================================================================
+// ==============================================================================================
 // media query
-// ========================================================================================
+// ==============================================================================================
 $media-max-width = 780px;                                 // media query max width (tablet)
 $media-max-width-mobile = 500px;                          // media query max width (mobile)
 
@@ -35,9 +35,9 @@ keep-mobile()
     { block }
 
 
-// ========================================================================================
+// ==============================================================================================
 // z-index
-// ========================================================================================
+// ==============================================================================================
 $z-index-1 = 1001;
 $z-index-2 = 1002;
 $z-index-3 = 1003;
@@ -49,17 +49,16 @@ $z-index-8 = 1008;
 $z-index-9 = 1009;
 
 
-// ========================================================================================
+// ==============================================================================================
-// color
+// theme primary color
-// ========================================================================================
+// ==============================================================================================
-// primary color
 $temp-color = hexo-config('style.primary_color');
 $primary-color = $temp-color ? convert($temp-color) : #0066CC;
 
 
-// ========================================================================================
+// ==============================================================================================
-// light mode color
+// theme light mode color set
-// ========================================================================================
+// ==============================================================================================
 $background-color = #fff;
 $second-background-color = darken($background-color, 3%);
 $default-text-color = #50505c;
@@ -76,13 +75,14 @@ $scroll-bar-bg-color = darken($background-color, 10%);
 $link-color = darken($default-text-color, 10%);
 $copyright-info-color = #CC0033;
 $avatar-background-color = #0066CC;
-$header-transparent-background-color = alpha($background-color, 0.7);
+$header-transparent-background-1 = alpha($background-color, 0.58);
+$header-transparent-background-2 = alpha($background-color, 0.38);
 $pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
 
 
-// ========================================================================================
+// ==============================================================================================
-// dark mode color
+// theme dark mode color set
-// ========================================================================================
+// ==============================================================================================
 $dark-primary-color = $primary-color;
 $dark-background-color = #383940;
 $dark-second-background-color = darken($dark-background-color, 10%);
@@ -100,22 +100,23 @@ $dark-scroll-bar-bg-color = lighten($dark-background-color, 20%);
 $dark-link-color = lighten($dark-default-text-color, 10%);
 $dark-copyright-info-color = darken($copyright-info-color, 20%);
 $dark-avatar-background-color = darken($avatar-background-color, 10%);
-$dark-header-transparent-background-color = alpha($dark-background-color, 0.7);
+$dark-header-transparent-background-1 = alpha($dark-background-color, 0.58);
+$dark-header-transparent-background-2 = alpha($dark-background-color, 0.38);
 $dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
 
 
-// ========================================================================
+// ==============================================================================================
 // font
-// ========================================================================
+// ==============================================================================================
 $default-font-family = Optima-Regular, Optima, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial;
 $default-font-size = 15.2px;
 $default-font-line-height = 22px;
 $default-font-weight = 400;
 
 
-// ========================================================================
+// ==============================================================================================
 //  light/dark mode color
-// ========================================================================
+// ==============================================================================================
 root-color(mode) {
   --background-color: mode == 'light' ? $background-color : $dark-background-color;
   --second-background-color: mode == 'light' ? $second-background-color : $dark-second-background-color;
@@ -134,7 +135,8 @@ root-color(mode) {
   --link-color: mode == 'light' ? $link-color : $dark-link-color;
   --copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color;
   --avatar-background-color: mode == 'light' ? $avatar-background-color : $dark-avatar-background-color;
-  --header-transparent-background-color: mode == 'light' ? $header-transparent-background-color : $dark-header-transparent-background-color;
+  --header-transparent-background-1: mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1;
+  --header-transparent-background-2: mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2;
   --pjax-progress-bar-color : mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color;
 }
 

source/css/layout/_partial/header.styl

@@ -11,12 +11,7 @@ $logo-image-box-width = 46px;
   align-items: center;
   justify-content: center;
   padding-top: $scroll-progress-bar-height;
-
-  if (hexo-config('style.first_screen.enable') == true && hexo-config('style.first_screen.header_transparent') == true) {
-    background: var(--header-transparent-background-color);
-  } else {
   background: var(--background-color);
-  }
 
   hover-style(false, 0, 0);
 

source/css/layout/page.styl

@@ -19,6 +19,16 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px;
     padding-top: $header-height;
     position: relative;
 
+    &.home {
+      .transparent-1 {
+        background: var(--header-transparent-background-1);
+      }
+
+      .transparent-2 {
+        background: var(--header-transparent-background-2);
+      }
+    }
+
     .header-shrink & {
       padding-top: $header-shrink-height;
 

source/js/header-shrink.js

@@ -9,15 +9,21 @@ KEEP.initHeaderShrink = () => {
 
     headerShrink() {
       const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
-
+      const headerWrapperDom = document.querySelector('.header-wrapper');
+      const { enable, header_transparent } = KEEP.theme_config.style.first_screen;
       if (!this.isHeaderShrink && scrollTop > this.headerHeight) {
         this.isHeaderShrink = true;
         document.body.classList.add('header-shrink');
+        if (enable === true && header_transparent === true) {
+          headerWrapperDom.classList.add('transparent-2');
+        }
       } else if (this.isHeaderShrink && scrollTop <= this.headerHeight) {
         this.isHeaderShrink = false;
         document.body.classList.remove('header-shrink');
+        if (enable === true && header_transparent === true) {
+          headerWrapperDom.classList.remove('transparent-2');
+        }
       }
-
     },
 
     toggleHeaderDrawerShow() {

source/js/utils.js

@@ -3,7 +3,6 @@
 KEEP.initUtils = () => {
 
   KEEP.utils = {
-
     html_root_dom: document.querySelector('html'),
     pageContainer_dom: document.querySelector('.page-container'),
     pageTop_dom: document.querySelector('.page-main-content-top'),
@@ -12,14 +11,23 @@ KEEP.initUtils = () => {
     pjaxProgressBar_dom: document.querySelector('.pjax-progress-bar'),
     pjaxProgressIcon_dom: document.querySelector('.pjax-progress-icon'),
     back2TopButton_dom: document.querySelector('.tool-scroll-to-top'),
+    headerWrapper_dom: document.querySelector('.header-wrapper'),
 
     innerHeight: window.innerHeight,
     pjaxProgressBarTimer: null,
     prevScrollValue: 0,
     fontSizeLevel: 0,
+    isHasScrollProgressBar: false,
+    isHasScrollPercent: false,
+    isHeaderTransparent: false,
 
-    isHasScrollProgressBar: KEEP.theme_config.style.scroll.progress_bar.enable === true,
+    initData() {
-    isHasScrollPercent: KEEP.theme_config.style.scroll.percent.enable === true,
+      const { scroll, first_screen } = KEEP.theme_config.style;
+      this.isHasScrollProgressBar = scroll.progress_bar.enable === true;
+      this.isHasScrollPercent = scroll.percent.enable === true;
+      const { enable, header_transparent } = first_screen;
+      this.isHeaderTransparent = enable === true && header_transparent === true;
+    },
 
     // Scroll Style Handle
     styleHandleWhenScroll() {
@@ -49,8 +57,19 @@ KEEP.initUtils = () => {
       // hide header handle
       if (scrollTop > this.prevScrollValue && scrollTop > this.innerHeight) {
         this.pageTop_dom.classList.add('hide');
+        if (this.isHeaderTransparent) {
+          this.headerWrapper_dom.classList.remove('transparent-1', 'transparent-2');
+        }
       } else {
         this.pageTop_dom.classList.remove('hide');
+        if (this.isHeaderTransparent) {
+          if (scrollTop <= this.headerWrapper_dom.getBoundingClientRect().height) {
+            this.headerWrapper_dom.classList.remove('transparent-2');
+            this.headerWrapper_dom.classList.add('transparent-1');
+          } else if (scrollTop < this.innerHeight) {
+            this.headerWrapper_dom.classList.add('transparent-2');
+          }
+        }
       }
       this.prevScrollValue = scrollTop;
     },
@@ -332,6 +351,9 @@ KEEP.initUtils = () => {
     },
   }
 
+  // init data
+  KEEP.utils.initData();
+
   // init scroll
   KEEP.utils.registerWindowScroll();