⚡ Feat: adjust header position value to 'sticky' (#65)

CHANGELOG.md

@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file.
 
 ## v0.2.13
 
+- :tada: Refactor: page layout ([#65](https://github.com/Lruihao/FixIt/issues/65))
 - :tada: Feat: add Artalk comment support ([#54](https://github.com/Lruihao/FixIt/issues/54))
 - :sparkles: Style: add media style for print view ([#61](https://github.com/Lruihao/FixIt/issues/61))
 - :sparkles: Feat: add pageStyle option ([#62](https://github.com/Lruihao/FixIt/issues/62))

assets/css/_page/_index.scss

@@ -1,13 +1,5 @@
 .page {
   position: relative;
-
-  [header-desktop] & {
-    padding-top: $header-height;
-  }
-
-  [header-desktop=normal] & {
-    padding-top: 0;
-  }
   
   .content {
     [id] {

assets/css/_partial/_header.scss

@@ -149,7 +149,8 @@ header {
 
 #header-desktop {
   display: block;
-  position: fixed;
+  position: sticky;
+  top: 0;
   height: $header-height;
   line-height: $header-height;
 
@@ -214,7 +215,8 @@ header {
 
 #header-mobile {
   display: none;
-  position: fixed;
+  position: sticky;
+  top: 0;
   height: $header-height;
   line-height: $header-height;
 

exampleSite/config.toml

@@ -492,11 +492,11 @@ enableEmoji = true
   # Header config
   # 页面头部导航栏配置
   [params.header]
-    # desktop header mode ("fixed", "normal", "auto")
-    # 桌面端导航栏模式 ("fixed", "normal", "auto")
-    desktopMode = "fixed"
-    # mobile header mode ("fixed", "normal", "auto")
-    # 移动端导航栏模式 ("fixed", "normal", "auto")
+    # desktop header mode ("sticky", "normal", "auto")
+    # 桌面端导航栏模式 ("sticky", "normal", "auto")
+    desktopMode = "sticky"
+    # mobile header mode ("sticky", "normal", "auto")
+    # 移动端导航栏模式 ("sticky", "normal", "auto")
     mobileMode = "auto"
     # Header title config
     # 页面头部导航栏标题配置

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -255,9 +255,9 @@ Please open the code block below to view the complete sample configuration :(far
 
   # Header config
   [params.header]
-    # desktop header mode ("fixed", "normal", "auto")
-    desktopMode = "fixed"
-    # mobile header mode ("fixed", "normal", "auto")
+    # desktop header mode ("sticky", "normal", "auto")
+    desktopMode = "sticky"
+    # mobile header mode ("sticky", "normal", "auto")
     mobileMode = "auto"
     # {{< version 0.2.0 >}} Header title config
     [params.header.title]

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -258,9 +258,9 @@ hugo
 
   # 页面头部导航栏配置
   [params.header]
-    # 桌面端导航栏模式 ("fixed", "normal", "auto")
-    desktopMode = "fixed"
-    # 移动端导航栏模式 ("fixed", "normal", "auto")
+    # 桌面端导航栏模式 ("sticky", "normal", "auto")
+    desktopMode = "sticky"
+    # 移动端导航栏模式 ("sticky", "normal", "auto")
     mobileMode = "auto"
     # {{< version 0.2.0 >}} 页面头部导航栏标题配置
     [params.header.title]