floating nav js and defined anchors

source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache

-<section class="program-detail-problem-solution mb-20">
+<section id="co-nas-stve" class="program-detail-problem-solution mb-20">
     <div class="problem-cross"><i class="ico--thincross text-xs sm:text-xl text-white"></i></div>
         <div class="problem-inner content-block">
              <h2 class="head-alt-sm md:head-alt-md mb-9">Problém</h2>
                 <p class="text-base mb-8">{{> atoms-paragraph-with-sources }}</p>
+                <div id="proc-je-to-problem">
                     {{> atoms-accordeon-row-preview }}
                 </div>
-    <div class="ideal-check"><i class="ico--check text-xs sm:text-xl text-black"></i></div>
+        </div>
+    <div id="nase-vize" class="ideal-check"><i class="ico--check text-xs sm:text-xl text-black"></i></div>
         <div class="ideal-inner bg-lemon content-block">
             <h2 class="head-alt-sm md:head-alt-md mb-9">Ideál</h2>
             <p class="text-base">Chceme vzdělanou a informovanou společnost, která se ubrání dezinformacím. Občané budou umět dezinformaci rozeznat a dezinformátoři budou reálně právně odpovědní.</p>

source/_patterns/01-molecules/26-floating-nav/floating-nav-pirati-stan.mustache

@@ -5,7 +5,7 @@
         </div>
         <div class="inner float-panel-inner elevation-2">
             <ul>
-                <li class="active"><a href="#co-nas-stve">Co nás štve?</a></li>
+                <li><a class="active" href="#co-nas-stve">Co nás štve?</a></li>
                 <li><a href="#proc-je-to-problem">Proč je to problém?</a></li>
                 <li><a href="#nase-vize">Naše vize</a></li>
                 <li><a href="#jak-toho-chceme-docilit">Jak toho chceme docílit?</a></li>
@@ -19,3 +19,63 @@
         </div>
     </div>
 </div>
+<script>
+    window.addEventListener("load", onLoadFunction);
+    var anchorsArray=[];
+
+    function placeUponId(id, space){
+        return document.getElementById(id).getBoundingClientRect().top +  window.scrollY - space;
+    }
+
+    function onLoadFunction(e){
+        var anchorElemsArray;
+        onResizeFunction();
+        for (const entry of anchorsArray) {
+          entry.menuitem.addEventListener("click", clickHandler);
+        }
+         
+        function clickHandler(e) {
+          e.preventDefault();
+          var id=this.getAttribute("href").replace("#","");
+          //console.log(placeUponId(id, 20));
+          scroll({
+            top: placeUponId(id, 20),
+            behavior: "smooth"
+          });
+        }
+
+
+        window.addEventListener("resize", onResizeFunction);
+    }
+    function onResizeFunction (e){
+        var itemsProcessed=0;
+        var anchorElemsArray=document.getElementsByClassName("float-panel-inner")[0].querySelectorAll("li a");
+        anchorsArray=[];
+        anchorElemsArray.forEach(function(entry){
+            var id=entry.getAttribute("href").replace("#","");
+            anchorsArray.push({
+              id: id,
+              top: placeUponId(id, 200),
+              menuitem: entry
+            });
+            itemsProcessed++;
+            if(itemsProcessed === anchorElemsArray.length) {
+              anchorsArray.reverse();
+            }
+        });
+        //console.log(anchorsArray);
+    }
+    window.onscroll = function() {
+        var top  = window.pageYOffset || document.documentElement.scrollTop;
+        var activereached=false;
+        anchorsArray.forEach(function(entry){
+            entry.menuitem.classList.remove("active");
+            entry.menuitem.classList.remove("passed");
+            if(top >= placeUponId(entry.id, 200)){
+                if(activereached) entry.menuitem.classList.add("passed"); else entry.menuitem.classList.add("active");
+                activereached=true;
+            }
+        });
+    };
+
+</script>
\ No newline at end of file

source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache

@@ -22,7 +22,7 @@
             </div>
             <div class="container-collapsible-content" style="height: 50vh;">
 
-                <h3 class="head-alt-base mb-8 leading-tight">Navrhovaná opatření:</h3>
+                <h3 id="jak-toho-chceme-docilit" class="head-alt-base mb-8 leading-tight">Navrhovaná opatření:</h3>
 
                 {{> atoms-unordered-list-checks-pirati-stan(label: "Profesní vzdělávání učitelů a ředitelů:")}}
 
@@ -30,7 +30,7 @@
 
                 {{> atoms-unordered-list-checks-pirati-stan}}
 
-                <div class="grid grid-cols-1 gap-8 mt-20">
+                <div id="kolik-potrebujeme-casu" class="grid grid-cols-1 gap-8 mt-20">
 
 
                     {{> organisms-countdown-small-pirati-stan }}
@@ -48,7 +48,7 @@
                 {{> atoms-figure(caption: "Popisek fotky") }}
 
 
-                <h3 class="head-alt-base mb-8 mt-20">BENEFITY</h3>
+                <h3 id="co-to-prinese" class="head-alt-base mb-8 mt-20">BENEFITY</h3>
                 <div class="program-detail-benefity grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
                     {{> molecules-benefits-pirati-stan(demoDesc: "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.")}}
                     {{> molecules-benefits-pirati-stan}}
@@ -74,24 +74,24 @@
                 <h3 class="head-alt-lg mb-20 text-3xl md:text-5xl leading-tight mt-24">V dlouhodobém horizontu přinese kriticky smýšlející společnost snížení nákladů, které jsou následkem dezinformací (soudy, veřejné zdraví).</h3>
 
 
-                <h3 class="head-alt-base mb-10">Co už jsme udělali:</h3>
+                <h3 id="co-jsme-uz-odpracovali" class="head-alt-base mb-10">Co už jsme udělali:</h3>
 
                 {{> atoms-unordered-list-checks-pirati-stan}}
 
                 {{> atoms-unordered-list-checks-pirati-stan}}
 
 
-                <h3 class="head-alt-base mb-8 mt-20">FAQ</h3>
+                <h3 id="casto-kladene-otazky" class="head-alt-base mb-8 mt-20">FAQ</h3>
                 {{> molecules-accordeon }}
 
-                <h3 id="relatedpoints" class="head-alt-base mb-8 mt-20">Související body:</h3>
+                <h3 id="souvisejici-body" class="head-alt-base mb-8 mt-20">Související body:</h3>
                 <div class="">
                     {{> molecules-carousel-card-list }}
                 </div>
                 <h3 class="head-alt-base mb-3 mt-20">Které části jsou závazné</h3>
                 <p><a href="#" class="text-acidgreen underline">Zjistit více</a></p>
 
-                <h3 class="head-alt-base mb-8 mt-8">Zdroje:</h3>
+                <h3 id="zdroje-a-doplnujici-informace" class="head-alt-base mb-8 mt-8">Zdroje:</h3>
 
                 {{> atoms-source(sourceNumber: 1) }}
                 {{> atoms-source(sourceNumber: 2, showDescription: true) }}

source/css/molecules/floating-nav-pirati-stan.pcss

@@ -7,7 +7,10 @@
 
 .floating-nav-panel {
     position: sticky;
+    top: 40px;
+    @media only screen and (min-width: 1400){
         top: 100px;
+    }
 
     .opener {
         @apply cursor-pointer;
@@ -18,7 +21,8 @@
     .inner {
         @apply bg-white absolute;
         width: 344px;
-        padding: 30px;
+        padding-top: 30px;
+        padding-bottom: 30px;
         top: 64px;
         left: 5px;
 
@@ -26,15 +30,27 @@
             @apply list-none;
 
             li {
-                @apply cursor-pointer py-4;
+                @apply cursor-pointer;
                 color: #4C4C4C;
                 font-size: 16px;
+
+                a{
+                    @apply block py-4 relative border-transparent;
+                    padding-left: 30px;
+                    padding-right: 30px;
+                    border-left-width: 5px;
+                    left: -5px;
+                }
             }
 
-            li:hover, li.active{
-                @apply pl-5 text-black font-bold bg-no-repeat;
+            li a:hover, li a.active{
+                @apply text-black font-bold bg-no-repeat;
+                padding-left: 50px;
                 background-image: url(../images/floating-nav-icon.svg);
-                background-position: center left;
+                background-position: left 30px center;
+            }
+            li a.active, li a.passed{
+                @apply border-acidgreen;
             }
 
         }