邓洁 : 页面向下滚动, header改变效果

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+<!--    <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
     <title>艺鹏瓷砖|广东祥睿陶瓷有限公司</title>
     <script>
       fnResize();

src/views/header/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="header_bg">
+  <div>
+    <div class="header_bg" id="header_bg">
       <el-row type="flex" class="up_header">
         <el-col :span="4">
         </el-col>
@@ -41,6 +42,21 @@
         </el-col>
       </el-row>
     </div>
+    <div class="search_header" id="search_header">
+      <div class="headerItems">
+        <ul>
+          <li v-for="(item,index) in navList" :key="index" class="nav">
+            <a :href="item.href">
+              {{ item.title }}
+            </a>
+          </li>
+        </ul>
+        <div class="search">
+          <i class="el-icon-search"></i>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -154,12 +170,37 @@ export default {
         }
       ]
     }
+  },
+  mounted() {
+    let header_bg = document.getElementById('header_bg')
+    let search_header = document.getElementById('search_header')
+
+    window.onscroll = () => {
+      // 获取滚动距离
+      let top = document.documentElement.scrollTop || document.body.scrollTop;
+      if (top >= 140) {
+        header_bg.style = 'display:none;transition:  all 0.6s;'
+        search_header.style = 'position: fixed;top: 0;;display:block;transition:  all 0.6s;'
+      } else if (top === 0) {
+        header_bg.style = 'position: static;'
+        search_header.style = 'display:none'
       }
     }
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        //这里写要操作的函数
+        window.screenWidth = document.body.clientWidth
+        that.width = window.screenWidth >= 1200
+      })()
+    }
+  },
+}
 </script>
 
 <style scoped lang="scss">
 .header_bg {
+  transition: all 0.6s;
   height: 130px;
   width: 100%;
   background-color: #111;
@@ -226,6 +267,7 @@ export default {
             line-height: 85px;
             font-size: 14px;
           }
+
           .nav_item:hover {
             text-decoration: underline;
           }
@@ -239,15 +281,18 @@ export default {
             width: 100px;
             background-color: #000;
             padding: 12px 0;
+
             > li {
               width: 100%;
               text-align: center;
               height: 35px;
               line-height: 35px;
+
               > a {
                 color: #fff;
                 font-size: 12px;
               }
+
               > a:hover {
                 text-decoration: underline;
               }
@@ -255,6 +300,7 @@ export default {
           }
 
         }
+
         > .nav:hover {
           .subNav {
             display: block;
@@ -264,4 +310,65 @@ export default {
     }
   }
 }
+
+.search_header {
+  width: 100%;
+  display: none;
+  background-color: #000;
+  min-width: 1290px;
+  z-index: 99999;
+
+  .headerItems {
+    position: relative;
+    padding: 8px 0;
+    width: 66%;
+    margin: 0 auto;
+
+    ul {
+      display: flex;
+      width: 100%;
+      padding-left: 100px;
+
+      li {
+        position: relative;
+        display: inline-block;
+        width: 12%;
+        z-index: 300;
+
+        a:hover {
+          text-decoration: underline;
+        }
+
+        a {
+          color: #fff;
+          display: inline-block;
+          position: relative;
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          font-size: 14px;
+          text-align: center;
+          text-decoration: none;
+          cursor: pointer;
+          z-index: 200;
+        }
+      }
+    }
+
+    .search {
+      cursor: pointer;
+      position: absolute;
+      right: 10px;
+      top: 0;
+      line-height: 62px;
+
+      i {
+        font-size: 20px;
+        color: #fff;
+      }
+    }
+  }
+
+
+}
 </style>