refactor: Optimizing the display of header when pjax enabled

layout/_layout.pug

@@ -14,10 +14,7 @@ html(lang=config.language)
   body
     div#container.container
       header#header.header
-        div.header-inner(style=`${
-          theme.header.bg_image.enable &&
-            page.top_image ? 'background: url(' + page.top_image + ') no-repeat center/cover;' : ''
-        }`)
+        div.header-inner
           != partial('./_partials/header/header.pug', null, { cache: theme.cache })
 
       main#main.main
@@ -49,7 +46,7 @@ html(lang=config.language)
     include ./_scripts/vendors.pug
     include ./_third-party/search/index.pug
 
-    if theme.pjax && theme.pjax.enable
+    if pjax
       include ./_third-party/pjax.pug
 
       div#pjax-reload

layout/_partials/header/header.pug

@@ -16,7 +16,11 @@ nav.header-nav
         if !theme.menu_settings.icon_only
           span!= __("nav.search")
 
-div.header-info
+div.header-info(style=`${
+    theme.header.bg_image.enable &&
+      page.top_image ? 'background: url(' + page.top_image + ') no-repeat center/cover;' : ''
+  }`)
+  div.header-info-mask
   div.header-info-inner
     div.header-info-title= config.title
     div.header-info-subtitle= config.subtitle

layout/_third-party/pjax.pug

@@ -6,7 +6,7 @@
   ];
 
   if (theme.header.bg_image.enable) {
-    pjaxSelectors.push('.header-inner');
+    pjaxSelectors.push('.header-info');
   }
 
   var pjaxArgs = {

source/css/_common/components/footer/index.styl

@@ -10,31 +10,31 @@
       }
     }
   }
-}
 
-.footer-inner {
-  padding: 1rem;
-  font-size: $font-size-footer;
-  text-align: center;
-  color: $footer-text-color;
-  background-color: $footer-bg-color;
+  &-inner {
+    padding: 1rem;
+    font-size: $font-size-footer;
+    text-align: center;
+    color: $footer-text-color;
+    background-color: $footer-bg-color;
 
-  if (hexo-config('footer.bg_image.enable')) {
-    background: url(hexo-config('footer.bg_image.url')) no-repeat center center;
-    background-size: cover;
-  }
+    if (hexo-config('footer.bg_image.enable')) {
+      background: url(hexo-config('footer.bg_image.url')) no-repeat center center;
+      background-size: cover;
+    }
 
-  a {
-    color: $footer-link-color;
-    transition-property: color;
-    transition-ease();
+    a {
+      color: $footer-link-color;
+      transition-property: color;
+      transition-ease();
 
-    &:hover {
-      color: $footer-link-hover-color;
+      &:hover {
+        color: $footer-link-hover-color;
+      }
     }
-  }
 
-  .separator {
-    margin: 0 .5rem;
+    .separator {
+      margin: 0 .5rem;
+    }
   }
 }

source/css/_common/components/header/index.styl

-.header-inner {
-  width: 100%;
-  font-size: $font-size-header;
-  background-color: $header-nav-bg-color;
-
-  if (hexo-config('header.height') && match('%', hexo-config('header.height'))) {
-    height: unit(convert(hexo-config('header.height')), 'vh');
-  } else {
-    height: convert(hexo-config('header.height') || '80vh');
-  }
-
-  if (hexo-config('header.bg_image.enable')) {
-    background: url(hexo-config('header.bg_image.url')) no-repeat center center;
-    background-size: cover;
-  }
-}
-
-if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_height'))) {
-  header-nav-height = unit(convert(hexo-config('header.nav_height')), 'vh');
-} else {
-  header-nav-height = convert(hexo-config('header.nav_height') || '50px');
-}
-
-.header-nav {
-  position: fixed;
-  top: 0;
-  z-index: $z-index1;
-  width: 100%;
-  height: header-nav-height;
-  transition-property: transform, background-color;
-  transition-ease();
-  will-change: transform;
-
-  &.fixed {
+.header {
+  &-inner {
+    width: 100%;
+    font-size: $font-size-header;
     background-color: $header-nav-bg-color;
-  }
 
-  &.slider-down {
-    transform: translateY(0);
+    if (hexo-config('header.height') && match('%', hexo-config('header.height'))) {
+      height: unit(convert(hexo-config('header.height')), 'vh');
+    } else {
+      height: convert(hexo-config('header.height') || '80vh');
+    }
   }
 
-  &.slider-up {
-    transform: translateY(-100%);
+  if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_height'))) {
+    header-nav-height = unit(convert(hexo-config('header.nav_height')), 'vh');
+  } else {
+    header-nav-height = convert(hexo-config('header.nav_height') || '50px');
   }
-}
 
-.header-nav-inner {
-  position: relative;
-  margin: 0 auto;
-  width: 'calc(100% - %s)' % ($content-aside-gap * 2);
-  height: 100%;
+  &-nav {
+    position: fixed;
+    top: 0;
+    z-index: $z-index1;
+    width: 100%;
+    height: header-nav-height;
+    transition-property: transform, background-color;
+    transition-ease();
+    will-change: transform;
 
-  i {
-    margin-right: .3rem;
-  }
-}
+    &.fixed {
+      background-color: $header-nav-bg-color;
+    }
 
-.header-nav-btn {
-  display: none;
-  padding: 0 .5rem;
-  line-height: header-nav-height;
-  color: $header-nav-link-color;
-}
+    &.slider-down {
+      transform: translateY(0);
+    }
 
-.header-nav-menu {
-  visibility: hidden;
-  height: 100%;
-  line-height: header-nav-height;
-  opacity: 0;
-  transition-property: opacity;
-  transition-ease();
-
-  &.show {
-    visibility: visible;
-    opacity: 1;
-  }
+    &.slider-up {
+      transform: translateY(-100%);
+    }
 
-  &-item {
-    float: left;
-    position: relative;
-    margin: 0 1rem 0 0;
-    text-align: center;
-    cursor: pointer;
+    &-inner {
+      position: relative;
+      margin: 0 auto;
+      width: 'calc(100% - %s)' % ($content-aside-gap * 2);
+      height: 100%;
 
-    &:last-child {
-      margin: 0;
+      i {
+        margin-right: .3rem;
+      }
     }
 
-    &__a {
-      display: block;
+    &-btn {
+      display: none;
       padding: 0 .5rem;
+      line-height: header-nav-height;
       color: $header-nav-link-color;
-      transition-property: color;
-      transition-ease();
     }
-  }
-}
 
-.header-nav-submenu {
-  display: none;
-  position: absolute;
-  right: -.4rem;
-  left: -.4rem;
-  border-radius: 3px;
-  background-color: $header-nav-bg-color;
+    &-menu {
+      visibility: hidden;
+      height: 100%;
+      line-height: header-nav-height;
+      opacity: 0;
+      transition-property: opacity;
+      transition-ease();
 
-  .header-nav-menu-item {
-    margin: 0;
-    width: 100%;
-    font-size: $font-size-header;
-    line-height: 1;
-    text-align: center;
-    transition-property: background-color;
-    transition-ease();
-    word-wrap();
+      &.show {
+        visibility: visible;
+        opacity: 1;
+      }
 
-    &__a {
-      line-height: header-nav-height;
+      &-item {
+        float: left;
+        position: relative;
+        margin: 0 1rem 0 0;
+        text-align: center;
+        cursor: pointer;
+
+        &:last-child {
+          margin: 0;
+        }
+
+        &__a {
+          display: block;
+          padding: 0 .5rem;
+          color: $header-nav-link-color;
+          transition-property: color;
+          transition-ease();
+        }
+      }
     }
-  }
-}
 
-if (hexo-config('algolia_search.enable') || hexo-config('local_search.enable')) {
-  .header-nav-search {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0 .5rem;
-    height: 100%;
-    line-height: header-nav-height;
-    color: $header-nav-link-color;
-    transition-property: color;
-    transition-ease-in-out();
-    cursor: pointer;
-
-    &:hover {
-      color: $header-nav-link-hover-color;
-
-      i,
-      span {
-        color: $header-nav-link-hover-color;
+    &-submenu {
+      display: none;
+      position: absolute;
+      right: -.4rem;
+      left: -.4rem;
+      border-radius: 3px;
+      background-color: $header-nav-bg-color;
+
+      .header-nav-menu-item {
+        margin: 0;
+        width: 100%;
+        font-size: $font-size-header;
+        line-height: 1;
+        text-align: center;
+        transition-property: background-color;
+        transition-ease();
+        word-wrap();
+
+        &__a {
+          line-height: header-nav-height;
+        }
+      }
+    }
+
+    if (hexo-config('algolia_search.enable') || hexo-config('local_search.enable')) {
+      &-search {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 0 .5rem;
+        height: 100%;
+        line-height: header-nav-height;
+        color: $header-nav-link-color;
+        transition-property: color;
+        transition-ease-in-out();
+        cursor: pointer;
+
+        &:hover {
+          color: $header-nav-link-hover-color;
+
+          i,
+          span {
+            color: $header-nav-link-hover-color;
+          }
+        }
       }
     }
   }
-}
 
-.header-info {
-  position: relative;
-  height: 100%;
+  &-info {
+    position: relative;
+    width: 100%;
+    height: 100%;
 
-  if (hexo-config('header.mask.enable')) {
-    background-color: alpha(#000, hexo-config('header.mask.opacity'));
-  }
-}
+    if (hexo-config('header.bg_image.enable')) {
+      background: url(hexo-config('header.bg_image.url')) no-repeat center center;
+      background-size: cover;
+    }
 
-.header-info-inner {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  left: 0;
-  padding: 0 .5rem;
-  text-align: center;
-  transform: translateY(-50%);
-}
+    &-inner {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      left: 0;
+      padding: 0 .5rem;
+      text-align: center;
+      transform: translateY(-50%);
+    }
 
-.header-info-title {
-  margin-bottom: .5rem;
-  font-size: 4rem;
-  font-weight: $font-weight-bolder;
-  line-height: 1.6em;
-  color: $white-light;
-}
+    if (hexo-config('header.mask.enable')) {
+      &-mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: alpha(#000, hexo-config('header.mask.opacity'));
+      }
+    }
 
-.header-info-subtitle {
-  font-size: 1.2rem;
-  font-weight: $font-weight-normal;
-  color: $white-light;
+    &-title {
+      margin-bottom: .5rem;
+      font-size: 4rem;
+      font-weight: $font-weight-bolder;
+      line-height: 1.6em;
+      color: $white-light;
+    }
+
+    &-subtitle {
+      font-size: 1.2rem;
+      font-weight: $font-weight-normal;
+      color: $white-light;
+    }
+  }
 }

source/js/scroll.js

@@ -78,9 +78,6 @@ $(document).ready(function () {
   $(window).on('DOMContentLoaded', back2top);
   $(window).on('scroll', Stun.utils.throttle(function () {
     headerNavScroll();
-  }, 100));
-
-  $(window).on('scroll', Stun.utils.throttle(function () {
     back2top();
   }, 100));