Fix scroll-margin for anchors and sticky top

okfde · Oct 31, 2023 · 505811e · 505811e
1 parent cfd9887
commit 505811e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/fragdenstaat_de/fds_cms/templates/cms/pub_base.html b/fragdenstaat_de/fds_cms/templates/cms/pub_base.html
@@ -53,7 +53,7 @@
           </div>
         {% endif %}
         <div class="bg-body col-md-10 col-lg-8 order-md-last mt-3 mb-3 ">
-          <div id="content" class="py-3 px-1 py-md-5 px-md-5">
+          <div id="content" class="book-pub-content py-3 px-1 py-md-5 px-md-5">
             {% block app_body %}
               {% placeholder "content" %}
             {% endblock %}

diff --git a/frontend/javascript/bookpub.js b/frontend/javascript/bookpub.js
@@ -60,8 +60,7 @@ function generateSubToc(level, headings, start = 1) {
 
 function setupScrollSpy(content, toc) {
   new ScrollSpy(content, {
-    target: toc,
-    smoothScroll: true
+    target: toc
   })
 }
 

diff --git a/frontend/styles/bookpub.scss b/frontend/styles/bookpub.scss
@@ -8,11 +8,17 @@
 
 @include media-breakpoint-up(lg) {
     .toc {
-        max-height: 90vh;
+        max-height: calc(100vh - 60px);
         overflow-y: scroll;
     }
 }
 
+.book-pub-content {
+    [id] {
+        scroll-margin-top: 60px;
+    }
+}
+
 .footnotes li:target p {
     color:  var(--froide-highlight-color);
     background-color: var(--froide-highlight-bg);