use the Affix plugin for sticky behavior

mollymca · Nov 22, 2015 · f08fd9f · f08fd9f
1 parent 5c830ea
commit f08fd9f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 25 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -8,14 +8,14 @@
  <link rel="stylesheet" href="{{ site.baseurl }}/assets/screen.css" media="screen" charset="utf-8">
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <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">
  <div class="row">
- <div id="toc" class="col-sm-4"></div>
+ <div class="col-sm-4">
+ <nav id="toc" data-spy="affix"></nav>
+ </div>
  <div class="col-sm-8">
  {{ content }}
  </div>

diff --git a/assets/screen.css b/assets/screen.css
@@ -1,15 +1,10 @@
-/* https://github.com/wilddeer/stickyfill */
-.sticky {
- position: -webkit-sticky;
- position: sticky;
- top: 0;
-}
-.sticky:before,
-.sticky:after {
- content: '';
- display: table;
-}
-
 #toc {
  top: 30px;
 }
+
+/* override the Affix plugin on small screens */
+@media (max-width: 768px) {
+ .affix {
+ position: static;
+ }
+}
diff --git a/assets/sticky.js b/assets/sticky.js