fix: optimize header-inner's display experience

reuixiy · Mar 5, 2020 · fd95216 · fd95216
1 parent de4def3
commit fd95216
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 12 deletions.
diff --git a/assets/js/header.js b/assets/js/header.js
@@ -1,24 +1,22 @@
 // Header Inner Width
 
+{{ with .Site.Params.headerFallbackWidth | default "32em" }}
+    const headerFallbackWidth = '{{ . }}';
+{{ end }}
+
 const headerInner = document.querySelector('.header-inner');
 const mainInner = document.querySelector('.main-inner');
 
-function setHeaderInnerWidth() {
+if (mainInner !== null) {
     const mainInnerWidth = window.getComputedStyle(mainInner, null).getPropertyValue('width');
 
     headerInner.style.setProperty('--main-inner', mainInnerWidth);
-}
-
-if (mainInner !== null) {
-    setHeaderInnerWidth();
-
-    window.addEventListener('resize', setHeaderInnerWidth);
 } else {
-    {{ with .Site.Params.headerFallbackWidth | default "32em" }}
-        headerInner.style.setProperty('--main-inner', '{{ . }}');
-    {{ end }}
+    headerInner.style.setProperty('--main-inner', headerFallbackWidth);
 }
 
+headerInner.style.setProperty('opacity', 1);
+
 
 // Hide switcher's parentNode if it has `data-hide`
 

diff --git a/assets/scss/layout/_header.scss b/assets/scss/layout/_header.scss
@@ -13,6 +13,7 @@
         background: $headerBackground;
     }
     .header-inner {
+        opacity: 0;
         display: flex;
         justify-content: space-between;
         align-items: center;