👌 IMPROVE: RHS TOC sticky when scrolling option

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
           auto-update-conda: true
           auto-activate-base: true
           miniconda-version: 'latest'
-          python-version: 3.9
+          python-version: "3.10"
           environment-file: lecture-python-programming.myst/environment.yml
           activate-environment: lecture-python-programming
       - name: Install quantecon-book-theme

.pre-commit-config.yaml

@@ -42,3 +42,4 @@ repos:
                 quantecon_book_theme/static/.*|
                 quantecon_book_theme/theme.conf
             )$
+        additional_dependencies: ['markupsafe==2.0.1']

quantecon_book_theme/layout.html

@@ -90,7 +90,11 @@
 
                 <div class="qe-page__toc">
 
+                    {% if theme_sticky_contents is defined and theme_sticky_contents is sameas true %}
+                    <div class="inner sticky">
+                    {%- else %}
                     <div class="inner">
+                    {%- endif %}
 
                         {% set page_toc = generate_toc_html() %}
 

quantecon_book_theme/theme.conf

@@ -1,7 +1,7 @@
 # Note: this should only be changed in src/jinja/theme.conf.j2
 [theme]
 inherit = pydata_sphinx_theme
-stylesheet = quantecon-book-theme.531cac136e77cfd0e9b23b36a70b130a.css
+stylesheet = quantecon-book-theme.721c9303961d2782852318325281aac8.css
 
 [options]
 single_page = False
@@ -28,4 +28,5 @@ keywords =
 twitter =
 twitter_logo_url =
 og_logo_url =
+sticky_contents = False
 persistent_sidebar = False

src/jinja/theme.conf

@@ -27,3 +27,5 @@ keywords =
 twitter =
 twitter_logo_url =
 og_logo_url =
+sticky_contents = False
+persistent_sidebar = False

src/jinja/theme.conf.j2

@@ -28,4 +28,5 @@ keywords =
 twitter =
 twitter_logo_url =
 og_logo_url =
+sticky_contents = False
 persistent_sidebar = False

src/js/quantecon-book-theme.js

@@ -1,3 +1,6 @@
+// ScrollSpy Plugin: https://github.com/r3plica/Scrollspy
+!function($,window,document,undefined){$.fn.extend({scrollspy:function(options){var defaults={namespace:"scrollspy",activeClass:"active",animate:!1,duration:1e3,offset:0,container:window,replaceState:!1};options=$.extend({},defaults,options);var add=function(ex1,ex2){return parseInt(ex1,10)+parseInt(ex2,10)},findElements=function(links){for(var elements=[],i=0;i<links.length;i++){var link=links[i],hash=$(link).attr("href"),element=$(hash);if(element.length>0){var top=Math.floor(element.offset().top),bottom=top+Math.floor(element.outerHeight());elements.push({element:element,hash:hash,top:top,bottom:bottom})}}return elements},findLink=function(links,hash){for(var i=0;i<links.length;i++){var link=$(links[i]);if(link.attr("href")===hash)return link}},resetClasses=function(links){for(var i=0;i<links.length;i++)$(links[i]).parent().removeClass(options.activeClass)},scrollArea="";return this.each(function(){for(var element=this,container=$(options.container),links=$(element).find("a"),i=0;i<links.length;i++){var link=links[i];$(link).on("click",function(e){var target=$(this).attr("href"),$target=$(target);if($target.length>0){var top=add($target.offset().top,options.offset);options.animate?$("html, body").animate({scrollTop:top},options.duration):window.scrollTo(0,top),e.preventDefault()}})}resetClasses(links);var elements=findElements(links),trackChanged=function(){for(var link,position={top:add($(this).scrollTop(),Math.abs(options.offset)),left:$(this).scrollLeft()},i=0;i<elements.length;i++){var current=elements[i];if(position.top>=current.top&&position.top<current.bottom){var hash=current.hash;if(link=findLink(links,hash)){options.onChange&&scrollArea!==hash&&(options.onChange(current.element,$(element),position),scrollArea=hash),options.replaceState&&history.replaceState({},"","/"+hash),resetClasses(links),link.parent().addClass(options.activeClass);break}}}!link&&"exit"!==scrollArea&&options.onExit&&(options.onExit($(element),position),resetClasses(links),scrollArea="exit",options.replaceState&&history.replaceState({},"","/"))};container.bind("scroll."+options.namespace,function(){trackChanged()}),$(document).ready(function(e){trackChanged()})})}})}(jQuery,window,document);
+
 document.addEventListener("DOMContentLoaded", function(){
 
     // Avoid `console` errors in browsers that lack a console.
@@ -315,4 +318,7 @@ document.addEventListener("DOMContentLoaded", function(){
         touch: false,
     });
 
-});
+    // Highlight page TOC links as user scrolls
+    $(".sticky #bd-toc-nav ul").scrollspy();
+
+})

src/scss/quantecon-book-theme.scss

@@ -467,7 +467,10 @@ tt {
     width: 200px;
 
     .inner {
-      height: 100%;
+      &.sticky {
+        position: sticky;
+        top: 7rem;
+      }
     }
 
     &-header {
@@ -500,6 +503,13 @@ tt {
               opacity: 1;
             }
           }
+
+          &.active {
+            >a {
+              //color: $color-primary;
+              font-weight: bold;
+            }
+          }
         }
       }
       .logo {
@@ -532,7 +542,7 @@ tt {
     }
 
     .nav>.active>ul {
-      display: block;
+      // display: block;
     }
 
     .nav .nav {
@@ -1483,6 +1493,11 @@ dl.module, dl.class, dl.exception, dl.function, dl.decorator, dl.data, dl.method
   }
 }
 
+.toctree-checkbox[type="checkbox"] {
+  position: absolute;
+  left: 400rem;
+}
+
 .toctree-wrapper {
   .caption-text {
     font-weight: normal;