fix(core): target should be visible with sticky header

italia · Jun 1, 2022 · e42ec09 · e42ec09 · vercel · Jun 1, 2022
1 parent 2adfaaf
commit e42ec09
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/docs/esempi/template-comuni-vuoto/index.html b/docs/esempi/template-comuni-vuoto/index.html
@@ -19,15 +19,15 @@ <h1>Lorem Ipsum</h1>
       dignissimos ex? Libero magni ipsa est, ut rem quas laborum fugit dolor facere qui fuga? Facere, tempora voluptatem, doloribus, cum eum pariatur veniam eos
       suscipit facilis illo quam maiores fuga iusto at optio!
     </p>
-    <h2>Dolor sit ament</h2>
+    <h2 id="dolor-sit-ament">Dolor sit ament</h2>
     <p>
       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore quaerat quae, provident reiciendis voluptatem qui ab tempora eligendi odio, debitis iste
       dolore soluta earum. Odio at incidunt asperiores mollitia iusto similique hic suscipit sequi possimus dolore optio magni minus, dolorem tenetur eius
       fugiat tempora illum consectetur voluptatibus ullam officiis est id. Consequuntur nulla dolores vitae doloribus necessitatibus voluptates, sapiente ex,
       ullam odit omnis ducimus est quis voluptatibus veniam. Iusto est vitae vero ducimus nisi quasi cum deleniti quod labore aspernatur iure ut officiis
       repellat doloribus molestias eius enim, neque adipisci consequatur ipsa, alias accusantium nostrum rerum!
     </p>
-    <h3>Explicabo ullam esse</h3>
+    <h3 id="explicabo-ullam-esse">Explicabo ullam esse</h3>
     <p>
       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore quaerat quae, provident reiciendis voluptatem qui ab tempora eligendi odio, debitis iste
       dolore soluta earum. Odio at incidunt asperiores mollitia iusto similique hic suscipit sequi possimus dolore optio magni minus, dolorem tenetur eius

diff --git a/src/js/plugins/sticky-header.js b/src/js/plugins/sticky-header.js
@@ -93,6 +93,10 @@
         } else if (window.scrollY + scrollToGap < navOffsetTop && isSticky) {
           toggleOff()
         }
+        const target = document.querySelector(':target')
+        if (target) {
+          target.style.setProperty('--sticky-height', elNavbar.offsetHeight + 'px')
+        }
       }
 
       window.addEventListener('scroll', runCheckSticky)

diff --git a/src/scss/custom/_header.scss b/src/scss/custom/_header.scss
@@ -1,6 +1,13 @@
 //mobile
 @use 'sass:math';
 
+:target::before {
+  content: '';
+  display: block;
+  height: var(--sticky-height, 0);
+  margin: calc(var(--sticky-height, 0) * -1) 0 0;
+}
+
 .it-header-wrapper {
   .it-nav-wrapper {
     position: relative;