瀏覽代碼

fix backToTop button

Leopoldthecoder 7 年之前
父節點
當前提交
399161eacc
共有 2 個文件被更改,包括 8 次插入7 次删除
  1. 6 4
      examples/components/header.vue
  2. 2 3
      examples/pages/template/component.tpl

+ 6 - 4
examples/components/header.vue

@@ -228,6 +228,10 @@
       }
     }
   }
+  
+  .nav-dropdown-list {
+    width: auto;
+  }
 
   @media (max-width: 850px) {
     .header {
@@ -265,9 +269,7 @@
   }
 </style>
 <template>
-  <div
-    class="headerWrapper"
-    :class="{ 'is-hidden': !visible && !isComponentPage }">
+  <div class="headerWrapper">
     <header class="header"
       ref="header"
       :style="headerStyle"
@@ -456,7 +458,7 @@
 
     mounted() {
       function scroll(fn) {
-        window.addEventListener('scroll', fn, false);
+        document.body.addEventListener('scroll', fn, false);
       }
       scroll(() => {
         if (this.isHome) {

+ 2 - 3
examples/pages/template/component.tpl

@@ -187,11 +187,10 @@
       toTop() {
         this.hover = false;
         this.showBackToTop = false;
-        document.body.scrollTop = 0;
-        document.documentElement.scrollTop = 0;
+        this.componentScrollBox.scrollTop = 0;
       },
       handleScroll() {
-        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+        const scrollTop = this.componentScrollBox.scrollTop;
         this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight;
         if (this.showHeader !== this.scrollTop > scrollTop) {
           this.showHeader = this.scrollTop > scrollTop;