From d879da79d47d9f5445502ec782c3ed13465a2b1a Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Thu, 17 Feb 2022 17:22:19 +0800
Subject: [PATCH] :zap: Feat: adjust header position value to 'sticky' (#65)

---
 CHANGELOG.md                                           |  1 +
 assets/css/_page/_index.scss                           |  8 --------
 assets/css/_partial/_header.scss                       |  6 ++++--
 exampleSite/config.toml                                | 10 +++++-----
 .../posts/theme-documentation-basics/index.en.md       |  6 +++---
 .../posts/theme-documentation-basics/index.zh-cn.md    |  6 +++---
 6 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c08a2e52..25eebe32 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss
index 532b03a5..a4c27b07 100644
--- a/assets/css/_page/_index.scss
+++ b/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] {
diff --git a/assets/css/_partial/_header.scss b/assets/css/_partial/_header.scss
index e61fc19e..23dae35e 100644
--- a/assets/css/_partial/_header.scss
+++ b/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;
 
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index c6430c34..bb8aa6ab 100644
--- a/exampleSite/config.toml
+++ b/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
     # 页面头部导航栏标题配置
diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md
index 19a97714..4f8a95e5 100644
--- a/exampleSite/content/posts/theme-documentation-basics/index.en.md
+++ b/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]
diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
index c9300692..782dc3a0 100644
--- a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
+++ b/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]