separate the 'sticky' code from the table of contents

mollymca · Nov 21, 2015 · 4b0999b · 4b0999b
1 parent 5b8cd4f
commit 4b0999b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -10,6 +10,7 @@
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/1.1.3/stickyfill.min.js" charset="utf-8"></script>
  <script src="{{ site.baseurl }}/bootstrap-toc.js" charset="utf-8"></script>
+ <script src="{{ site.baseurl }}/assets/sticky.js" charset="utf-8"></script>
  </head>
  <body>
  <div class="container">

diff --git a/assets/sticky.js b/assets/sticky.js
@@ -0,0 +1,10 @@
+$(function() {
+ var $toc = $('#toc');
+
+ // essentially a media query for Bootstrap's col-sm-* breakpoint – make the table of contents "sticky" on wider screen sizes
+ if ($(window).width() >= 768) {
+ $toc.addClass('sticky');
+ }
+
+ $('.sticky').Stickyfill();
+});
diff --git a/bootstrap-toc.js b/bootstrap-toc.js
@@ -2,13 +2,6 @@
 // * https://jsfiddle.net/gableroux/S2SMK/
 // * http:https://gregfranko.com/jquery.tocify.js/
 $(function() {
- var $toc = $('#toc');
-
- // essentially a media query for Bootstrap's col-sm-* breakpoint – make the table of contents "sticky" on wider screen sizes
- if ($(window).width() >= 768) {
- $toc.addClass('sticky');
- }
-
  var generateUniqueIdBase = function(el) {
  var text = $(el).text();
  var anchor = text.trim().toLowerCase().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '');
@@ -80,9 +73,9 @@ $(function() {
  return $context;
  };
 
- var init = function() {
+ var init = function($base) {
  var $context = $('<ul></ul>');
- $toc.append($context);
+ $base.append($context);
 
  $('h1,h2,h3,h4').each(function(i, el) {
  var anchor = generateAnchor(el);
@@ -96,7 +89,6 @@ $(function() {
  });
  };
 
-
- init();
- $('.sticky').Stickyfill();
+ var $toc = $('#toc');
+ init($toc);
 });