#47 Adds spacing to FAQ accordion when sticky header is true

Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com>

Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com>

assets/js/accordion.js

@@ -12,6 +12,15 @@ const closeAccordion = (accordion) => {
     content.style.maxHeight = null;
 };
 
+// If sticky_header add offset of 80/100 based on device width.
+const getScrollOffset = () => {
+    if (window.innerWidth < 1000) {
+        return stickyHeader ? 80 : 0; 
+    } else {
+        return stickyHeader ? 100 : 0;
+    }
+};
+
 accordions.forEach((accordion) => {
     const title = accordion.querySelector(".accordion__title");
     const content = accordion.querySelector(".accordion__content");
@@ -23,13 +32,15 @@ accordions.forEach((accordion) => {
             accordions.forEach((accordion) => closeAccordion(accordion));
             openAccordion(accordion);
 
-            // Use setTimeout to wait a moment before scrolling into view
+            // Use setTimeout to wait a moment before scrolling into view.
             setTimeout(() => {
-                accordion.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'start'
+                const offset = getScrollOffset();
+                const elementTop = accordion.getBoundingClientRect().top;
+                window.scrollBy({
+                    top: elementTop - offset,
+                    behavior: 'smooth'
                 });
-            }, 500);
+            }, 250);
         }
     };
 });

layouts/partials/footer.html

@@ -89,6 +89,9 @@
 {{ if and (eq .Type "faq") (eq .Kind "section") }}
 {{ $js := resources.Get "js/accordion.js" }}
 <script defer src="{{ $js.Permalink }}"></script>
+<script>
+    var stickyHeader = {{ if .Site.Params.sticky_header }}true{{ else }}false{{ end }};
+  </script>
 {{ end }}
 
 {{/* Theme: Scripts */}}