stickNav map elements switch active when scrolling

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue

@@ -71,7 +71,7 @@ export default {
             }
             a[name^="section"] {
                position: absolute;
-               top: -2em;
+               top: -4em;
             }
          }
          padding: 0.8em 0em;

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue

@@ -68,14 +68,17 @@ export default {
          
          this.anchorsMap();
          
-         const resizeObserver = new ResizeObserver(entries => {   // FF/Chrome!
+         const resizeObserver = new ResizeObserver(entries => {
+            
+            // Listen to header size changes,
+            // then recalculate height sum and anchorsMap
+            // TODO only FF/Chrome!
             
-            //console.log('header', this.header.offsetHeight);
-            //console.log('bannerName', this.bannerName.offsetHeight);
-            //console.log('bannerDetails', this.bannerDetails.offsetHeight);
             this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
             //console.log('sum', this.sumBanner);
-            //console.log('--');
+            
+            this.items = [];
+            this.anchorsMap();
             
          });
          resizeObserver.observe(this.header);
@@ -86,10 +89,12 @@ export default {
       anchorsMap() {
          
          this.anchors = document.querySelectorAll("h2 a[name^='section']");
+         
          this.anchors.forEach(anchor => {
             //console.log('anchor', anchor);
             this.items.push({
                pos: this.findPosition(anchor)['y'],
+               active: false,
                key: parseInt(anchor.name.slice(8).slice(0, -1)),
                name: '#' + anchor.name,
                anchor: anchor
@@ -114,6 +119,7 @@ export default {
             this.stickyNav.style.left = pos['x'] + 'px';
          }
          
+         this.switchActive();
       },
       findPosition(element) {
          
@@ -131,8 +137,15 @@ export default {
           
           return pos;
       },
-      isActive() {
-         return true;
+      switchActive() {
+         
+         this.items.forEach((item, i) => {
+            let next = (this.items[i+1]) ? this.items[i+1].pos : '1000000';
+            item.active = 
+                (window.scrollY >= item.pos & window.scrollY < next) ? true : false;
+            
+         }, this);
+         
       }
    }
 }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue

@@ -23,11 +23,8 @@ export default {
    props: ['item', 'step'],
    computed: {
       isActive() {
-         return true;
+         return this.item.active;
       }
    }
 }
 </script>
-
-<style lang="css" scoped>
-</style>