make toc sticky

scripts/demo.js

@@ -166,7 +166,7 @@ var PriviewImg = React.createClass({
     return (
       <span className="preview-image-wrapper">
         <img src={this.props.src} onClick={this.showImageModal} alt={this.props.alt} />
-        <Modal className="image-modal" width="800" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
+        <Modal className="image-modal" width="960" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
           <img src={this.props.src} alt={this.props.alt} />
         </Modal>
       </span>

site/static/script.js

@@ -28,6 +28,7 @@ InstantClickChangeFns.push(function() {
     item.find('.highlight').appendTo(item);
   });
 
+  $('.code-boxes').off('click');
   $('.code-boxes').on('click', '.collapse', function() {
     var highlightBox = $(this).parent().parent().find('.highlight');
     var codeVisible = highlightBox.is(':visible');
@@ -56,9 +57,12 @@ InstantClickChangeFns.push(function() {
   // 移动 API 文档到演示下方
   $('.markdown #api').nextAll().andSelf().appendTo('.api-container');
 
+  // 滚动时固定锚点、高亮当前项
   var titles = $('.markdown :header:not(h1)');
+  var doc = $(document);
+  var tocTop = $('.toc').offset().top;
+  console.log($('.toc').offset(), $('.toc').css('position'));
   function onScroll() {
-    var doc = $(document);
     var top = doc.scrollTop(), i;
     if (top >= doc.height()- $(window).height() - 20) {
       i = titles.length - 1;
@@ -74,6 +78,12 @@ InstantClickChangeFns.push(function() {
     }
     $('.anchor a').removeClass('current');
     $('.anchor a').eq(i).addClass('current');
+
+    if (top >= tocTop) {
+      $('.toc').addClass('sticky');
+    } else {
+      $('.toc').removeClass('sticky');
+    }
   }
 
   onScroll();

site/static/style.css

@@ -490,7 +490,7 @@ footer ul li > a {
 .main-container {
   border-left: 1px solid #e9e9e9;
   margin-left: 259px;
-  padding: 0 40px 120px;
+  padding: 0 24px 120px;
   background: #fff;
   min-height: 500px;
 }
@@ -692,12 +692,17 @@ footer ul li > a {
 }
 
 .toc {
+  float: right;
+  font-size: 12px;
+  background: #fff;
+  padding-top: 12px;
+}
+
+.toc.sticky {
   position: fixed;
-  top: 130px;
+  top: 0;
   right: 4%;
   margin-right: 24px;
-  font-size: 12px;
-  background: #fff;
   z-index: 100;
 }
 
@@ -1221,10 +1226,10 @@ a.entry-link:hover .anticon-smile {
 
 .demos-anchor {
   color: #aaa;
-  position: fixed;
+  position: absolute;
   margin-right: 24px;
-  top: 128px;
-  right: 4%;
+  top: 24px;
+  right: 0;
   z-index: 100;
   background: #fff;
   font-size: 12px;