diff --git a/inst/resources/bs4_book/bs4_book.css b/inst/resources/bs4_book/bs4_book.css index 0bc45a0b1..85e2b3431 100644 --- a/inst/resources/bs4_book/bs4_book.css +++ b/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) { diff --git a/inst/resources/bs4_book/bs4_book.js b/inst/resources/bs4_book/bs4_book.js index 348d18285..0bdd89b32 100644 --- a/inst/resources/bs4_book/bs4_book.js +++ b/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 ---------------------------------------------------------------------- diff --git a/inst/templates/bs4_book.html b/inst/templates/bs4_book.html index 68578084c..b95fe0878 100644 --- a/inst/templates/bs4_book.html +++ b/inst/templates/bs4_book.html @@ -83,11 +83,11 @@ Skip to main content
-

+

$title$$if(subtitle)$: $subtitle$$endif$

- +