update toc style

site/static/script.js

@@ -42,10 +42,8 @@ InstantClickChangeFns.push(function() {
   });
 
   function hashChange() {
-    if (location.hash.indexOf('#demo-') === 0) {
+    $('.anchor a').removeClass('current');
-      $('.demos-anchor a').removeClass('current');
+    $('.anchor a[href="' + decodeURI(location.hash) + '"]').addClass('current');
-      $('.demos-anchor a[href="' + location.hash + '"]').addClass('current');
-    }
   }
 
   hashChange();
@@ -56,6 +54,31 @@ InstantClickChangeFns.push(function() {
   // 移动 API 文档到演示下方
   $('.markdown #api').nextAll().andSelf().appendTo('.api-container');
 
+  var titles = $('.markdown :header:not(h1)');
+  function onScroll() {
+    var doc = $(document);
+    var top = doc.scrollTop(), i;
+    if (top >= doc.height()- $(window).height() - 20) {
+      i = titles.length - 1;
+    } else {
+      for (i=0; i<titles.length; i++) {
+        if (top < titles.eq(i).offset().top - 20) {
+          break;
+        }
+      }
+      i--;
+      i = (i < 0) ? 0 : i;
+      i = (i > titles.length - 1) ? (title.length - 1) : i;
+    }
+    $('.anchor a').removeClass('current');
+    $('.anchor a').eq(i).addClass('current');
+  }
+
+  onScroll();
+
+  // 滚动高亮
+  $(window).on('scroll', onScroll);
+
   // 添加上一页下一页
   if ($('.aside-container li > a').length > 0) {
     var links = $('.aside-container li > a');
@@ -69,10 +92,10 @@ InstantClickChangeFns.push(function() {
     var prevLink = links[currentLinkIndex - 1];
     var nextLink = links[currentLinkIndex + 1];
     if (prevLink) {
-      prevNextNavNode.append('<a href="' + prevLink.href + '">' + prevLink.innerHTML + '</a>');
+      prevNextNavNode.append('<a class="prev-page" href="' + prevLink.href + '">' + prevLink.innerHTML + '</a>');
     }
     if (nextLink) {
-      prevNextNavNode.append('<a href="' + nextLink.href + '">' + nextLink.innerHTML + '</a>');
+      prevNextNavNode.append('<a class="next-page" href="' + nextLink.href + '">' + nextLink.innerHTML + '</a>');
     }
     prevNextNavNode.appendTo('.main-container');
   }

site/static/style.css

@@ -499,6 +499,7 @@ footer ul li > a {
   animation: xRightMatrix .5s ease-out;
   background: #fff;
   min-height: 500px;
+  position: relative;
 }
 
 .main-container-center {
@@ -656,6 +657,69 @@ footer ul li > a {
   margin-left: 0.5em;
 }
 
+.prev-next-nav {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  border-top: 1px solid #e9e9e9;
+  font-size: 16px;
+}
+
+.prev-next-nav > a {
+  padding: 0 24px;
+  width: 50%;
+  float: left;
+  line-height: 72px;
+  height: 72px;
+}
+
+.prev-next-nav > .prev-page:before {
+  font-family: 'anticon';
+  content: '\e601';
+  font-size: 12px;
+  margin-right: 1em;
+}
+
+.prev-next-nav > .next-page {
+  text-align: right;
+  float: right;
+}
+
+.prev-next-nav > .next-page:after {
+  font-family: 'anticon';
+  content: '\e600';
+  font-size: 12px;
+  margin-left: 1em;
+}
+
+.toc {
+  position: sticky;
+  top: 40px;
+  float: right;
+  font-size: 12px;
+}
+
+.toc li > ul {
+  text-indent: 10px;
+}
+
+.toc a {
+  padding-left: 10px;
+  border-left: 2px solid #eee;
+  display: block;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 120px;
+}
+
+.toc a.current {
+  border-color: #2db7f5;
+}
+
 /****************************动画样式*********************************/
 .delay-mode {
   animation-fill-mode: backwards !important;
@@ -2121,8 +2185,8 @@ a.entry-link:hover .anticon-smile {
 .demos-anchor {
   color: #aaa;
   position: fixed;
-  top: 120px;
+  top: 100px;
-  right: 0;
+  right: 32px;
   z-index: 100;
   transition: all 0.3s ease;
   background: #fff;
@@ -2138,47 +2202,3 @@ a.entry-link:hover .anticon-smile {
   animation-fill-mode: forwards;
   opacity: 0;
 }
-
-.demos-anchor li {
-  list-style: decimal outside;
-  width: 75px;
-  margin-bottom: 2px;
-}
-
-.demos-anchor a {
-  color: #666;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: bottom;
-  display: inline-block;
-  width: 100%;
-}
-
-.demos-anchor a > span {
-  position: relative;
-}
-
-.demos-anchor a.current > span,
-.demos-anchor a > span:hover {
-  color: #2db7f5;
-}
-
-.demos-anchor a > span:after {
-  text-decoration: underline;
-  position: absolute;
-  top: auto;
-  bottom: -1px;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background-color: #2db7f5;
-  content: '';
-  transition: all 0.2s;
-  backface-visibility: hidden;
-  transform: scaleX(0);
-}
-
-.demos-anchor a > span:hover:after {
-  transform: scaleX(1);
-}

site/templates/demos.html

@@ -33,7 +33,7 @@
   </div>
   {%- endif %}
 </div>
-<ul class="demos-anchor">
+<ul class="toc demos-anchor anchor">
   {%- for item in items %}
   {%- set post = item.meta.filepath|parsePost %}
   <li>

site/templates/page.html

@@ -16,9 +16,9 @@
 
 {% block content %}
 <section class="main-container">
+  <div class="toc anchor">{{ post.toc }}</div>
   <article class="markdown">
     <h1>{{ post.title }} {{ post.meta.chinese }}</h1>
-    <div class="toc">{{ post.toc }}</div>
     {{ post.html|add_anchor }}
   </article>
 </section>