From acdd7ac920ac0f4f1d8eeb8d5f7d49029dc6fea4 Mon Sep 17 00:00:00 2001
From: barrystone <barrystone3183@gmail.com>
Date: Tue, 30 Mar 2021 23:26:12 +0800
Subject: [PATCH] [Fix] fix header(navbar) postion and space

---
 src/assets/scss/header.scss    | 14 +++-----------
 src/assets/scss/home/home.scss |  7 +------
 src/components/Header.vue      | 33 ---------------------------------
 3 files changed, 4 insertions(+), 50 deletions(-)

diff --git a/src/assets/scss/header.scss b/src/assets/scss/header.scss
index f938e8a..ae1bb97 100644
--- a/src/assets/scss/header.scss
+++ b/src/assets/scss/header.scss
@@ -24,10 +24,10 @@ $font-header-apply: "Noto Serif CJK TC -Black";
 }
 
 .header {
-  position: relative;
   z-index: 99;
+  position: relative;
+  top: 40px;
   left: 6%;
-  top: 60px;
   width: 88%;
   height: 62px;
   border-radius: 73px;
@@ -35,11 +35,10 @@ $font-header-apply: "Noto Serif CJK TC -Black";
   background-color: $white;
 
   &--sticky {
-    // position: fixed;
     position: sticky;
     z-index: 99;
     left: 6%;
-    top: 65px;
+    margin-top: 60px;
   }
   &__left {
     float: left;
@@ -57,15 +56,12 @@ $font-header-apply: "Noto Serif CJK TC -Black";
   &__right {
     float: right;
     width: 80%;
-    // background-color: lightgoldenrodyellow;
   }
 
   &-links {
-    // background-color: lightgray;
     font-family: $font-header-link;
     float: right;
     @include headerLinksWidth;
-    // width: 600px;
     margin-right: 92px;
     height: 100%;
     height: 50px;
@@ -85,9 +81,6 @@ $font-header-apply: "Noto Serif CJK TC -Black";
         height: 100%;
         display: block;
         text-align: left;
-        // &:active {
-        //   border-bottom: $indigo-blue solid 5px;
-        // }
 
         a {
           @include headerLinksFontSize;
@@ -99,7 +92,6 @@ $font-header-apply: "Noto Serif CJK TC -Black";
   }
 
   &-link--active {
-    // padding-bottom: 10px;
     border-bottom: $indigo-blue solid 3.5px;
   }
 
diff --git a/src/assets/scss/home/home.scss b/src/assets/scss/home/home.scss
index 2203112..86a62e1 100644
--- a/src/assets/scss/home/home.scss
+++ b/src/assets/scss/home/home.scss
@@ -130,7 +130,7 @@ $font-home-button: "Noto Serif CJK TC -Black";
 
 .section {
   &-title {
-    margin-top: 88px;
+    margin-top: 20px;
     @include sectionTitleHeight;
     // background-color: chartreuse;
   }
@@ -144,9 +144,7 @@ $font-home-button: "Noto Serif CJK TC -Black";
   font-family: $font-home;
   position: relative;
   &__title {
-    // width: 600px;
     width: 75%;
-    // width: 60%;
     text-align: center;
     // background-color: cornflowerblue;
     margin: 0 auto;
@@ -159,7 +157,6 @@ $font-home-button: "Noto Serif CJK TC -Black";
       margin-bottom: 20px;
       // background-color: chocolate;
       height: 80px;
-      // width: 600px;
       width: 100%;
       p {
         @include homeTitleFontsize;
@@ -175,7 +172,6 @@ $font-home-button: "Noto Serif CJK TC -Black";
       text-align: center;
       // background-color: chocolate;
       height: 80px;
-      // width: 600px;
       width: 100%;
       margin: 0 auto;
       margin-top: 80px;
@@ -241,7 +237,6 @@ $font-home-button: "Noto Serif CJK TC -Black";
   }
 
   &-button {
-    // transform: scale(2);
     font-size: 12.5pt;
     font-family: $font-home-button;
     position: relative;
diff --git a/src/components/Header.vue b/src/components/Header.vue
index dc99714..9afb5f2 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -76,39 +76,6 @@ export default class Header extends Vue {
   public onRoute(routeName: String) {
     return this.$props.route.name === routeName ? true : false;
   }
-
-  // computed(){
-  //   pagePosition:function(){
-
-  //   }
-
-  // }
-
-  //   header = document.getElementById("topHeader");
-  //   sticky = this.header.offsetTop;
-  //   header = null;
-  //   sticky = null;
-  //   created() {
-  //     window.addEventListener("scroll", this.handleScroll);
-  //   }
-  //   destroyed() {
-  //     window.removeEventListener("scroll", this.handleScroll);
-  //   }
-  //   mounted() {
-  //     this.header = document.getElementById("topHeader");
-  //     this.sticky = this.header.offsetTop;
-  //     console.log("window.pageYOffset", window.pageYOffset);
-  //     console.log("sticky", this.sticky);
-  //   }
-  //   handleScroll(event) {
-  //     if (window.pageYOffset < this.sticky) {
-  //       this.header.classList.add("header--sticky");
-  //     } else {
-  //       this.header.classList.remove("header--sticky");
-  //     }
-  //     console.log("func window.pageYOffset", window.pageYOffset);
-  //     console.log("func sticky", this.sticky);
-  //   }
 }
 </script>