diff --git a/static/css/markdown.preview.css b/static/css/markdown.preview.css
index 2a73bb3d..6bc815a8 100644
--- a/static/css/markdown.preview.css
+++ b/static/css/markdown.preview.css
@@ -43,6 +43,9 @@
     right: 0;
     width: 260px;
     font-size: 12px;
+    margin-top: -70px;
+    overflow: auto;
+    margin-right: 50px;
 }
 .markdown-toc ul{
     list-style:none;
@@ -58,7 +61,7 @@
 }
 
 .article-body .markdown-article{
-    margin-right: 200px;
+    margin-right: 250px;
 }
 .markdown-toc-list .directory-item {
     padding: 3px 10px 3px 16px;
@@ -92,6 +95,9 @@
 .markdown-toc-list .directory-item-link-5 {
     padding-left: 4.8em;
 }
+.markdown-toc-list .directory-item-link-6 {
+    padding-left: 6em;
+}
 .markdown-toc-list .directory-item-active {
     border-left: 2px solid #25b864 !important;
 }
diff --git a/static/js/kancloud.js b/static/js/kancloud.js
index 22bf81e3..40be92ad 100644
--- a/static/js/kancloud.js
+++ b/static/js/kancloud.js
@@ -159,14 +159,16 @@ $(function () {
         }catch (e) {
             console.log(e);
         }
+
         try{
-            var scrollTop = $(document).scrollTop();
+            var scrollTop = $("body").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){
+
+                if(offsetTop-scrollTop < 58){
                     oName = "#" + oneItem.attr("name");
                 }
             });
@@ -177,10 +179,26 @@ $(function () {
                     $(this).parents("li").removeClass("directory-item-active");
                 }
             });
+            if(!$(".markdown-toc-list li").hasClass('directory-item-active')) {
+                $(".markdown-toc-list li:eq(0)").addClass("directory-item-active");
+            }
         }catch (e) {
             console.log(e);
         }
     });
+    $(".markdown-toc-list li:eq(0)").addClass("directory-item-active");
+
+    $(".markdown-toc-list a").on("click",function () {
+        $(".markdown-toc-list li").removeClass("directory-item-active");
+        $(this).parents("li").addClass("directory-item-active");
+    });
+
+    $(window).resize(function (e) {
+        var h = $(".manual-catalog").innerHeight() - 20;
+        $(".markdown-toc").height(h);
+    });
+    $(window).resize();
+
     window.isFullScreen = false;
 
     initHighlighting();