diff --git a/examples/components/header.vue b/examples/components/header.vue
index 106ce5d33..395be988d 100644
--- a/examples/components/header.vue
+++ b/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) {
diff --git a/examples/pages/template/component.tpl b/examples/pages/template/component.tpl
index f11122bec..a013a32bf 100644
--- a/examples/pages/template/component.tpl
+++ b/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;