diff --git a/static/css/markdown.preview.css b/static/css/markdown.preview.css
index df1b97ee..a2a3541a 100644
--- a/static/css/markdown.preview.css
+++ b/static/css/markdown.preview.css
@@ -57,7 +57,7 @@
     border-right: 2px solid #25b864;
 }
 
-.article-body .markdown-article{
+.article-body .markdown-article,.article-body .attach-list{
     margin-right: 200px;
 }
 .markdown-toc-list .directory-item {
@@ -93,7 +93,7 @@
     padding-left: 4.8em;
 }
 .markdown-toc-list .directory-item-active {
-    border-left: 2px solid #25b864;
+    border-left: 2px solid #25b864 !important;
 }
 .markdown-toc-list .directory-item-active a {
     color: #25b864;
diff --git a/views/document/default_read.tpl b/views/document/default_read.tpl
index 1559deea..4eef9be6 100644
--- a/views/document/default_read.tpl
+++ b/views/document/default_read.tpl
@@ -288,6 +288,27 @@ $(function () {
             return $(body).highlight(window.keyword);
         });
     });
+    $(".manual-right").scroll(function(){
+        var scrollTop = $(document).scrollTop();
+        var oItem = $(".markdown-heading").find(".reference-link");
+        var oName = "";
+        $.each(oItem,function(){
+            var oneItem = $(this);
+            var offsetTop = oneItem.offset().top;
+            if(offsetTop-scrollTop < 200){
+                oName = "#" + oneItem.attr("name");
+            }
+        });
+        console.log(oName);
+        $(".markdown-toc-list a").each(function () {
+            if(oName === $(this).attr("href")) {
+                $(this).parents("li").addClass("directory-item-active");
+            }else{
+                $(this).parents("li").removeClass("directory-item-active");
+            }
+        });
+    });
+
 });
 </script>
 {{.Scripts}}