diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
index e4cfaaa..9f8c958 100644
--- a/src/styles/markdown.scss
+++ b/src/styles/markdown.scss
@@ -1,3 +1,106 @@
+/deep/:root {
+  --font-color: #000;
+  --night-font-color: #ddd;
+  --primary: #b2fefa;
+  --secondary: #0ed2f7;
+  --dark: #0052d4;
+  --gradient-light: #5d9eea;
+  --gradient-middle: #0f27b5;
+  --gradient-dark: #100e17;
+  --code-gradient-light: #cff0ff;
+  --code-gradient-dark: #afcafd;
+  --maxwidth: 1284px;
+}
+.scrollbar {
+  position: fixed;
+  height: 3px;
+  width: 10px;
+  top: 50px;
+  background-color: #50bcb6;
+  -webkit-transition: width 0.5s ease;
+  -moz-transition: width 0.5s ease;
+  transition: width 0.5s ease;
+  z-index: 11;
+}
+.gradient-bg-rev {
+  background: #b2fefa !important;
+  background: -webkit-linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important;
+  background: linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important;
+}
+/deep/ #top {
+  line-height: 2;
+  height: 50px;
+  text-align: center;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  display: none;
+  /* border-bottom: 1px solid #201c29; */
+  -webkit-transition: all 350ms ease-in-out;
+  transition: all 350ms ease-in-out;
+  -webkit-box-shadow: 0 0 30px #000;
+  box-shadow: 0 0 30px #000;
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px);
+  background-color: rgba(255,255,255,0.72);
+  .bar {
+    position: absolute;
+    height: 100%;
+    background: #b2fefa !important;
+    background: -webkit-linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important;
+    background: linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important;
+    z-index: -1;
+    width: 50%;
+    -webkit-transition: width 0.5s ease-in-out;
+    -moz-transition: width 0.5s ease-in-out;
+    transition: width 0.5s ease-in-out;
+    opacity: 0.25;
+  }
+  .icon-home {
+    top: 14px;
+  }
+  .icon-home {
+    -webkit-background-size: 20px 20px;
+    -moz-background-size: 20px 20px;
+    background-size: 20px 20px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    left: 20px;
+    cursor: pointer;
+  }
+  .subtitle {
+    background: #b2fefa !important;
+    background: -webkit-linear-gradient(to right, #000000, #4a4a4a, #000000) !important;
+    background: linear-gradient(to right, #000000, #4a4a4a, #000000) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    -webkit-box-decoration-break: clone !important;
+    box-decoration-break: clone !important;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 14px;
+    margin-top: 12px;
+    display: none;
+    transition: display 400ms ease-in-out;
+    max-width: 50%;
+    max-height: 30px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+.animateIn {
+  transform: translateY(0px);
+}
+.animateOut {
+  transform: translateY(-100%);
+}
 
 /deep/ .right-bj {
   //top: 70px;
@@ -7,7 +110,7 @@
   //border-radius: 5px;
   //box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
   width: 285px;
-  float: right;
+  //float: right;
   position: relative;
   display: flex;
   flex-direction: column;
diff --git a/src/views/public/article/index.vue b/src/views/public/article/index.vue
index 02faba6..e18cf15 100644
--- a/src/views/public/article/index.vue
+++ b/src/views/public/article/index.vue
@@ -4,6 +4,16 @@
       <al-loading v-if="isLoading"></al-loading>
     </transition>
     <al-back-top></al-back-top>
+
+    <div id="top" style="display: block;" class="animateIn">
+      <div class="bar" style="width: 0;"></div>
+      <div class="navigation animated fadeIn fast delay-1s">
+        <svg-icon id="home-icon" class="icon-home" icon-class="tab-folder" ></svg-icon>
+        <div id="play-icon" title="Play/Pause" class="iconfont icon-play"></div>
+        <h3 class="subtitle" style="display: block;">深入理解JVM</h3>
+      </div>
+      <div class="scrollbar gradient-bg-rev" style="width: 0;"></div>
+    </div>
     <div class="body-wrapper">
           <el-main class="l_main">
             <mavon-editor
@@ -52,7 +62,8 @@
         content:'',
         html:'',
         titleList: [],
-        tocMaxHeight: 500
+        tocMaxHeight: 500,
+        befterScrollTop: 0,
       }
     },
     mounted() {
@@ -60,10 +71,13 @@
         this.getMarkDown()
         this.showList = false
       }
+
     },
     methods: {
       onScroll() {
-        // console.log(document.documentElement.scrollTop)
+        console.log("befterScrollTop")
+        // let befterScrollTop = document.documentElement.scrollTop;
+        // console.log("befterScrollTop",befterScrollTop)
       },
       getMarkDown() {
         markdownApi.getMarkdown({
@@ -92,7 +106,7 @@
               a = a.splice(a.length/2,a.length)
               for (let i = 0; i < a.length; i++) {
                 a[i] = a[i].replace(/id="/g, 'href="#')
-                if (a[i].indexOf('h1') === 1) {
+                if (i ===0 && a[i].indexOf('h1') !== -1) {
                   a[i] = '<li first>' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
                 }else if (a[i].indexOf('h2') !== -1) {
                   a[i] = '<li class="pl">' + a[i].replace(/<h2>|<\/h2>/g, '') + '</li>'
@@ -107,13 +121,53 @@
               for (let i = 0; i < a.length; i++) {
                 a[i] = a[i].replace(/.*?#(.*)".*/g, '$1')
               }
-              $(window).on("scroll",function () {
+
+              let beforeScrollTop = document.documentElement.scrollTop;
+              let fn = fn || function (direction) {
+                console.log(direction)
+                // 判断是上滑显示,下滑隐藏
+                if(direction === 'down'){
+                  $('#top').removeClass('animateIn')
+                  $('#top').addClass('animateOut')
+                }
+                if(direction === 'up'){
+                  $('#top').removeClass('animateOut')
+                  $('#top').addClass('animateIn')
+                }
+              };
+
+              $(window).on("scroll",function (event) {
                 for (let i = 0; i < a.length; i++) {
                   if ($(window).scrollTop() > $('#' + a[i]).offset().top - 100 || $(this).scrollTop() + $(this).height() == $(document).height()) {
                     $('.j-titleList').find('li').eq(i).addClass('active').siblings('li').removeClass('active');
                     $('.j-bj').css('top', i * 44)
                   }
                 }
+
+                // 判断是上滑还是下滑
+                var afterScrollTop = document.documentElement.scrollTop;
+                let delta = afterScrollTop - beforeScrollTop;
+                beforeScrollTop = afterScrollTop;
+                var scrollTop = $(this).scrollTop();
+                var scrollHeight = $(document).height();
+                var windowHeight = $(this).height();
+
+                var progress = (afterScrollTop/scrollHeight) * 100
+                // 改变top bar 进度条
+                document.querySelector(".scrollbar").style.width = progress +'%'
+
+                if (scrollTop + windowHeight > scrollHeight - 10) {  //滚动到底部执行事件
+                  fn('bottom');
+                  return;
+                }
+                if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
+                  fn('up');
+                } else {
+                  if (Math.abs(delta) < 10) {
+                    return false;
+                  }
+                  fn(delta > 0 ? "down" : "up");
+                }
               })
 
               let $root = $('html, body');
@@ -136,11 +190,8 @@
               addCodeBtn();
               _this.isLoading = false
             },150)
-
           })
-
           // const doc = document.querySelector(".v-show-content");
-          // document.addEventListener("scroll", _this.onScroll);
 
         })
       }