site(style):menu stricky

HineShen · Apr 6, 2019 · bd1ba38 · bd1ba38
1 parent bb71db5
commit bd1ba38
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 74 deletions.
diff --git a/site/theme/default/App.vue b/site/theme/default/App.vue
@@ -2,12 +2,15 @@
   <div class="mfe-blog-theme-default default-container" :class="{'is-home': isHome}">
     <mb-header :is-active="isHome" :logo-ads="logoAds"/>
     <div class="default-content">
-      <mb-menu
-        v-if="!noMenu"
-        v-model="isMenuShow"
-        :menua-ads="menuAds"
-      />
-      <div class="default-content-wrapper">
+      <div class="default-content-sidebar">
+        <mb-menu
+          :class="{stricky: isAffixStricky}"
+          v-if="!noMenu"
+          v-model="isMenuShow"
+          :menu-ads="menuAds"
+        />
+      </div>
+      <div class="default-content-wrapper" :class="{stricky: isAffixStricky}">
         <router-view></router-view>
       </div>
     </div>
@@ -17,7 +20,7 @@
     <div class="default-menu-trigger" v-else @click="changeLang">
       <i class="lang" v-text="lang === 'en-US' ? '中文' : 'English'"></i>
     </div>
-    <mb-footer/>
+    <mb-footer :class="{stricky: isAffixStricky}"/>
     <div class="hover-ggs" v-if="hoverAds && hoverAds.length" >
       <a
         v-for="(gg, index) in hoverAds"
@@ -31,6 +34,7 @@
 </template>
 
 <script>
+import { Affix } from 'vue-affix'
 import './assets/js/responsive'
 import './assets/css/global.styl'
 import './assets/css/markdown.styl'
@@ -46,13 +50,15 @@ import { localStore } from './assets/js/util'
 export default {
   name: 'mfe-blog-theme-default',
   components: {
+    Affix,
     MbHeader: Header,
     MbMenu: Menu,
     MbFooter: Footer,
   },
   data() {
     return {
       isMenuShow: false,
+      isAffixStricky: false,
       hoverAds: [], // {image: string, link: string}
       menuAds: [], // {image: string, link: string}
       logoAds: {}, // images: Array logo下方图片集合，text: string logo下方slogan
@@ -86,6 +92,14 @@ export default {
   },
   mounted () {
     this.getConfig()
+    if (document.documentElement.clientWidth > 1000) {
+      $(window).bind('scroll', () => {
+        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
+        this.strickyAffix(scrollTop)
+        // this.strickyToggleBar(scrollTop)
+      })
+      this.strickyAffix(document.body.scrollTop || document.documentElement.scrollTop)
+    }
   },
   methods: {
     getConfig () {
@@ -104,6 +118,15 @@ export default {
        location.reload()
       }
     },
+    strickyAffix (scrollTop) {
+      window.requestAnimationFrame(() => {
+        if (scrollTop > 96) {
+          this.isAffixStricky = true
+        } else {
+          this.isAffixStricky = false
+        }
+      })
+    }
   }
 }
 
@@ -123,10 +146,14 @@ export default {
   .default-content
     min-height 800px
     padding 32px 0
-    &:after
-      content ""
-      clear both
-      display table
+    clearfix()
+    .default-content-sidebar
+      clearfix()
+      float left
+      width 16.666%
+      min-height 10px
+      .stricky
+        width 16.666%
     .default-content-wrapper
       position relative
       left -1px

diff --git a/site/theme/default/Home.vue b/site/theme/default/Home.vue
@@ -221,7 +221,7 @@ export default {
 <style lang="stylus">
 .mfe-blog-theme-default-home
   .home-box
-    display grid
+    // display grid
     width 1280px
     margin 0 auto
     .home-box-block

diff --git a/site/theme/default/assets/css/toc.styl b/site/theme/default/assets/css/toc.styl
@@ -4,10 +4,10 @@
     right 0
     width 150px
     border-left solid 1px #f0f1f2
-    &.is-stricky
-      position fixed
-      top 32px
-      right 0
+    // &.is-stricky
+    //   position fixed
+    //   top 32px
+    //   right 0
     .mfe-blog-toc-item
       position relative
       block()

diff --git a/site/theme/default/components/Doc.vue b/site/theme/default/components/Doc.vue
@@ -29,9 +29,9 @@
           <div class="default-doc-demo-list">
             <div class="default-doc-demo"
               v-for="(demo, index) in demos"
-              v-if="index % 2 === 0"
               :key="index">
               <div class="doc-demo-box"
+                v-if="index % 2 === 0"
                 :class="[
                   `doc-demo-box-${index}`,
                   demoBoxShowStat[index] ? 'active' : ''
@@ -120,9 +120,10 @@
           <div class="default-doc-demo-list">
             <div class="default-doc-demo"
               v-for="(demo, index) in demos"
-              v-if="index % 2 !== 0"
-              :key="index">
+              :key="index"
+            >
               <div class="doc-demo-box"
+                v-if="index % 2 !== 0"
                 :class="[
                   `doc-demo-box-${index}`,
                   demoBoxShowStat[index] ? 'active' : ''
@@ -233,8 +234,8 @@
     <div
       v-if="!hiddenToc"
       class="default-doc-toc"
-      :class="{'is-stricky': isTocStricky}"
-      v-html="toc">
+      v-html="toc"
+    >
     </div>
   </div>
 </template>
@@ -293,15 +294,15 @@ export default {
   },
 
   mounted() {
-    if (!this.hiddenToc) {
-      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
-      $(window).bind('scroll', () => {
-        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
-        this.strickyTocBar(scrollTop)
-        // this.strickyToggleBar(scrollTop)
-      })
-      this.strickyTocBar(scrollTop)
-    }
+    // if (!this.hiddenToc) {
+    //   const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
+    //   $(window).bind('scroll', () => {
+    //     const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
+    //     this.strickyTocBar(scrollTop)
+    //     // this.strickyToggleBar(scrollTop)
+    //   })
+    //   this.strickyTocBar(scrollTop)
+    // }
     
     if (location.hash) {
       const tmpHash = location.hash.substr(1)
@@ -335,47 +336,46 @@ export default {
 
       this.$set(this.demoBoxShowStat, index, stat)
     },
-    strickyTocBar(scrollTop) {
-      window.requestAnimationFrame(() => {
-        if (scrollTop > 96) {
-          this.isTocStricky = true
-        } else {
-          this.isTocStricky = false
-        }
-      })
-    },
-    strickyToggleBar (scrollTop) {
-      window.requestAnimationFrame(() => {
-        this.toggleStrickyToggleBar(scrollTop)
-      })
-    },
-    toggleStrickyToggleBar (scrollTop) {
-      scrollTop = scrollTop || document.body.scrollTop || document.documentElement.scrollTop
-      $.each($('.doc-demo-box-toggle'), (index, item) => {
-        const width = $(item).width()
-        const height = $(item).height()
-        const demo = $(item).siblings('.doc-demo-box-code')
-        const offset = demo.offset()
-        const codeHeight = demo.height()
-        const top = $(window).height() - (offset.top - scrollTop)
-        const bottom = $(window).height() - (offset.top + codeHeight - scrollTop)
-        if ($(item).hasClass('active') && top >= 0 && bottom <= 0) {
-          if (!$(item).hasClass('is-stricky')) {
-            $(item).css({maxWidth: `${width}px`, left: `${$(item).offset().left}px`})
-            $(item).addClass('is-stricky')
-          }
-        } else {
-          $(item).css({maxWidth: `${width}px`, left: '0px'})
-          $(item).removeClass('is-stricky')
-        }
-      })
-    },
+    // strickyTocBar(scrollTop) {
+    //   window.requestAnimationFrame(() => {
+    //     if (scrollTop > 96) {
+    //       this.isTocStricky = true
+    //     } else {
+    //       this.isTocStricky = false
+    //     }
+    //   })
+    // },
+    // strickyToggleBar (scrollTop) {
+    //   window.requestAnimationFrame(() => {
+    //     this.toggleStrickyToggleBar(scrollTop)
+    //   })
+    // },
+    // toggleStrickyToggleBar (scrollTop) {
+    //   scrollTop = scrollTop || document.body.scrollTop || document.documentElement.scrollTop
+    //   $.each($('.doc-demo-box-toggle'), (index, item) => {
+    //     const width = $(item).width()
+    //     const height = $(item).height()
+    //     const demo = $(item).siblings('.doc-demo-box-code')
+    //     const offset = demo.offset()
+    //     const codeHeight = demo.height()
+    //     const top = $(window).height() - (offset.top - scrollTop)
+    //     const bottom = $(window).height() - (offset.top + codeHeight - scrollTop)
+    //     if ($(item).hasClass('active') && top >= 0 && bottom <= 0) {
+    //       if (!$(item).hasClass('is-stricky')) {
+    //         $(item).css({maxWidth: `${width}px`, left: `${$(item).offset().left}px`})
+    //         $(item).addClass('is-stricky')
+    //       }
+    //     } else {
+    //       $(item).css({maxWidth: `${width}px`, left: '0px'})
+    //       $(item).removeClass('is-stricky')
+    //     }
+    //   })
+    // },
     goToDemo (index) {
       const component = this.info.preview.split('#')[1]
       if (component) {
         window.open(`https://github.com/didi/mand-mobile/edit/master/components/${component}/demo/cases/demo${index}.vue`)
       }
-      console.log(this.info.preview, index)
     },
     onCopySuccess (e) {
       this.isCopySuccess = true
@@ -389,6 +389,12 @@ export default {
 </script>
 
 <style lang="stylus">
+.default-content-wrapper.stricky
+  .default-doc-toc
+    position fixed
+    top 20px
+    right 0
+
 .mfe-blog-theme-default-doc
   position relative
   block()

diff --git a/site/theme/default/components/Footer.vue b/site/theme/default/components/Footer.vue
@@ -58,15 +58,13 @@ export default {
 </script>
 
 <style lang="stylus">
-clearfix()
-  &:after
-    content ""
-    clear both
-    display table
 .mfe-blog-theme-default-footer
   position relative
   height 673px
   -webkit-font-smoothing antialiased
+  &.stricky
+    .default-footer-container, .default-footer-copyright-container
+      left 16.6%
 
   .default-footer-bg
     position absolute
@@ -98,6 +96,7 @@ clearfix()
     box-sizing border-box
     clearfix()
   .default-footer-copyright-container
+    position relative
     width 1280px
     margin 0 auto
 

diff --git a/site/theme/default/components/Header.vue b/site/theme/default/components/Header.vue
@@ -33,7 +33,7 @@
         </div>
         <div class="default-header-version default-header-operater">
           <div class="operater-select" @click.stop="versionTableShow = true">
-            <span>{{version}}</span>
+            <span>{{`v${version}`}}</span>
           </div>
           <mfe-table v-model="versionTableShow" :data="versionData" style="width:96px;top:47px;left:50%;transform:translateX(-50%)"></mfe-table>
         </div>
@@ -102,7 +102,7 @@ export default {
       logo: window.mbConfig.logo,
       versionTableShow: false,
       versionData: [{
-        text: '1.x',
+        text: 'v1.x',
         path: 'https://mand-mobile.github.io'
       }],
       langSwitchPath: ''

diff --git a/site/theme/default/components/Menu.vue b/site/theme/default/components/Menu.vue
@@ -83,7 +83,7 @@ export default {
 <style lang="stylus">
 .mfe-blog-theme-default-menu
   float left
-  width 16.666%
+  // width 16.666%
   // min-height 1500px
   height 100%
   // padding 32px 0
@@ -92,6 +92,12 @@ export default {
   -webkit-font-smoothing antialiased
   background #FFF
   overflow hidden
+  &.stricky
+    position fixed
+    z-index 2
+    top 20px
+    left 0
+    overflow-y auto
   .menu-ggs
     padding 0 40px 10px 40px
     .menu-ggs-item