fix: sections scroll issue (#327)

Fixes the issue outlined in #28

Also to make it more friendly I added some scrolling logic to keep the
active element on the table in view.

I tried to apply the smooth scrolling though that seems to cause it to
fail. While this could be achieved via Jquery I believe it would be more
visually distracting to suddenly see another list scrolling smoothly
rather than jumping to the right location, though it should be
relatively easy to add should it be requested.

Author: stevespringett

theme/_layouts/examples.html

@@ -63,5 +63,25 @@
     {% endif %}
     {% include site-footer.html %}
 </div><!-- /.js-footer-area -->
+<!-- Custom ScrollSpy Logic -->
+<script>
+    $(document).ready(function() {
+        $('[data-spy="scroll"]').on('activate.bs.scrollspy', function (event) {
+            const highlightedElement = $(event.target);
+
+            if (highlightedElement.length) {
+                const elementRect = highlightedElement[0].getBoundingClientRect();
+                const container = highlightedElement.parent().parent()[0];
+                const containerRect = container.getBoundingClientRect();
+
+                const isOutOfView = elementRect.top < containerRect.top || elementRect.bottom > containerRect.bottom;
+
+                if (isOutOfView) {
+                    highlightedElement[0].scrollIntoView();
+                }
+            }
+        });
+    });
+</script>
 </body>
 </html>

theme/_sass/components/_sections-list.scss

@@ -17,6 +17,8 @@
 .sections-list.affix {
 	position: fixed;
 	top: 90px;
+	bottom: 20px;
+	overflow: scroll;
 }
 
 .sections-list.affix-bottom {