Add scroll visible util

README.md

@@ -211,6 +211,9 @@ ignoreHiddenElements: false,
 headingObjectCallback: null,
 // Set the base path, useful if you use a `base` tag in `head`.
 basePath: '',
+// Only takes affect when `tocSelector` is scrolling,
+// keep the toc scroll position in sync with the content.
+disableTocScrollSync: false,
 ```
 
 

src/components/Template/TryIt/index.js

@@ -39,7 +39,7 @@ export default class TryIt extends React.Component {
     backupHtml = backupHtml && backupHtml.innerHTML
 
     return (
-      <div className={`try-it-container transition--300 fixed w-60 ma2 z-3 bottom-0 right-0 ${this.state.open ? 'is-open' : 'is-closed'}`}>
+      <div className={`try-it-container transition--300 fixed w-20 ma2 z-3 bottom-0 right-0 ${this.state.open ? 'is-open' : 'is-closed'}`}>
         <div className='cb pb2'>
           <button
             className='button bn f6 link br1 ph3 pv2 mb2 dib white bg-dark-gray fr'

src/js/default-options.js

@@ -85,5 +85,8 @@ module.exports = {
   // function (object, HTMLElement) => object | void
   headingObjectCallback: null,
   // Set the base path, useful if you use a `base` tag in `head`.
-  basePath: ''
+  basePath: '',
+  // Only takes affect when `tocSelector` is scrolling,
+  // keep the toc scroll position in sync with the content.
+  disableTocScrollSync: false,
 }

src/js/index.js

@@ -30,6 +30,7 @@
 
   var BuildHtml = require('./build-html.js')
   var ParseContent = require('./parse-content.js')
+  var updateTocScroll = require('./update-toc-scroll.js')
   // Keep these variables at top scope once options are passed in.
   var buildHtml
   var parseContent
@@ -161,6 +162,7 @@
     // Update Sidebar and bind listeners.
     this._scrollListener = throttle(function (e) {
       buildHtml.updateToc(headingsArray)
+      !options.disableTocScrollSync && updateTocScroll(options)
       var isTop = e && e.target && e.target.scrollingElement && e.target.scrollingElement.scrollTop === 0
       if ((e && (e.eventPhase === 0 || e.currentTarget === null)) || isTop) {
         buildHtml.updateToc(headingsArray)

src/js/update-toc-scroll.js

@@ -0,0 +1,9 @@
+module.exports = function updateTocScroll(options) {
+  var toc = document.querySelector(options.tocSelector)
+  if (toc && toc.scrollHeight > toc.clientHeight) {
+    var activeItem = toc.querySelector('.' + options.activeListItemClass)
+    if (activeItem) {
+      toc.scrollTop = activeItem.offsetTop
+    }
+  }
+}

src/utils/make-ids.js

@@ -1,14 +1,16 @@
-var content = document.querySelector('.js-toc-content')
-var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
-var headingMap = {}
+function makeIds () {
+  var content = document.querySelector('.js-toc-content')
+  var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
+  var headingMap = {}
 
-Array.prototype.forEach.call(headings, function (heading) {
-  var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
+  Array.prototype.forEach.call(headings, function (heading) {
+    var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
     .split(' ').join('-').replace(/[!@#$%^&*():]/ig, '').replace(/\//ig, '-')
-  headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
-  if (headingMap[id]) {
-    heading.id = id + '-' + headingMap[id]
-  } else {
-    heading.id = id
-  }
-})
+      headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
+      if (headingMap[id]) {
+        heading.id = id + '-' + headingMap[id]
+      } else {
+        heading.id = id
+      }
+  })
+}