Feature: 1380 Sticky Header Update

inst/resources/bs4_book/bs4_book.css

@@ -58,7 +58,53 @@ main {margin-top: 1rem;}
     padding-left: 1rem;
   }
   .sidebar-book {
-    margin-top: 1rem;
+    background-color: #fff;
+    padding-top: 1rem;
+    position: relative;
+    transition: .5s ease top;
+    top: -4rem;
+    transform: translateY(4rem);
+    z-index: 1
+  }
+  .sidebar-book .nav-toggle-btn {
+    height: 2.5rem;
+    /*! margin-left: 1rem; */
+  }
+  .sidebar-chapter #toc {
+    margin-top: 0;
+    transition: .5s ease margin-top;
+  }
+
+  .scrolled-to-main .book-title {
+    width: calc(100% - 3rem);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 0;
+  }
+
+  .scrolled-to-main .book-title a {
+    line-height: 2.5rem;
+  }
+
+  .scrolled-to-main .book-title a::before {
+    display: none;
+  }
+
+  .scrolled-to-main .sidebar-book {
+    background-color: #fff;
+    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
+    left: 0;
+    padding-bottom: .5rem;
+    padding-top: .5rem;
+    position: sticky;
+    top: 0;
+    transform: none;
+    z-index: 1
+  }
+
+  .scrolled-to-main .sidebar-chapter #toc {
+    margin-top: 4rem;
   }
 }
 @media (min-width: 992px) {

inst/resources/bs4_book/bs4_book.js

@@ -20,7 +20,40 @@ $(function () {
     sanitize: false,
   });
   $('[data-toggle="tooltip"]').tooltip();
-})
+});
+
+// Sticky Nav ------------------------------------------------------------------
+
+$(function () {
+  const main = document.getElementById('content');
+  const header = document.querySelector('.sidebar-book');
+  let dist = 0;
+
+  // calculate distance to the content so we know when to transition to sticky mode
+  const setDist = () => {
+    dist = main.getBoundingClientRect().top + window.scrollY;
+  }
+
+  const toggleStickyLayoutClass = () => {
+    if (window.innerWidth > 991) return;
+    if (dist < window.scrollY) {
+      if (!document.body.classList.contains('scrolled-to-main')) {
+        main.style.paddingTop = 
+          `${Math.round(header.getBoundingClientRect().height - 56)}px`;
+        document.body.classList.add('scrolled-to-main');
+      }
+    } else if (document.body.classList.contains('scrolled-to-main')) {
+      document.body.classList.remove('scrolled-to-main');
+      main.style.paddingTop = null;
+    }
+  };
+
+  // set initial value
+  setDist();
+
+  window.addEventListener('scroll', toggleStickyLayoutClass);
+  window.addEventListener('resize', setDist);
+});
 
 // Search ----------------------------------------------------------------------
 

inst/templates/bs4_book.html

@@ -83,11 +83,11 @@
     <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
 
     <div class="d-flex align-items-start justify-content-between">
-      <h1>
+      <h1 class="book-title">
         <a href="index.html" title="$subtitle$">$title$</a>$if(subtitle)$:
         <small class="text-muted">$subtitle$</small>$endif$
       </h1>
-      <button class="btn btn-outline-primary d-lg-none ml-2 mt-1" type="button" data-toggle="collapse" data-target="#main-nav" aria-expanded="true" aria-controls="main-nav"><i class="fas fa-bars"></i><span class="sr-only">Show table of contents</span></button>
+      <button class="btn btn-outline-primary d-lg-none nav-toggle-btn" type="button" data-toggle="collapse" data-target="#main-nav" aria-expanded="true" aria-controls="main-nav"><i class="fas fa-bars"></i><span class="sr-only">Show table of contents</span></button>
     </div>
 
     <div id="main-nav" class="collapse-lg">