diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index 18144d27e..8dd66d0f2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -80,7 +80,7 @@ export default {
          border-radius: 5px;
          border-left: 1px dotted #718596ab;
          border-right: 1px dotted #718596ab;
-         /*
+         /* debug components
          position: relative; 
          &:before { 
             content: "vuejs component";
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
index fa462a456..117c4f09b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
@@ -31,7 +31,7 @@ export default {
          bannerName: document.querySelector("#header-accompanying_course-name"),
          bannerDetails: document.querySelector("#header-accompanying_course-details"),
          container: null,
-         sumBanner: null,
+         heightSum: null,
          stickyNav: null,
          limit: 25,
          anchors: null,
@@ -59,63 +59,44 @@ export default {
    methods: {
       ready() {
 
-         // when mounted ready
+         // load datas DOM when mounted ready
          this.container = document.querySelector("#content_conainter .container.content .container");
          this.stickyNav = document.querySelector('#navmap');
-         
-         this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
-         this.anchorsMap();
+         this.anchors = document.querySelectorAll("h2 a[name^='section']");
+         this.initItemsMap();                  
          
          // TODO resizeObserver not supports IE !
-         // Listen when elements change size, then recalculate height sum and anchorsMap
+         // Listen when elements change size, then recalculate heightSum and initItemsMap
          const resizeObserver = new ResizeObserver(entries => {
-            
-            this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
-            //console.log('calculate sum', this.sumBanner);
-            this.items = [];
-            this.anchorsMap();
+            this.refreshPos();
          });
          
          resizeObserver.observe(this.header);
          resizeObserver.observe(this.bannerName);
          resizeObserver.observe(this.bannerDetails);
          resizeObserver.observe(this.container);
-             
       },
-      anchorsMap() {
-         
-         this.anchors = document.querySelectorAll("h2 a[name^='section']");
+      initItemsMap() {
          
          this.anchors.forEach(anchor => {
-            //console.log('anchor', anchor);
             this.items.push({
-               pos: this.findPosition(anchor)['y'],
+               pos: null,
                active: false,
                key: parseInt(anchor.name.slice(8).slice(0, -1)),
                name: '#' + anchor.name
             })
          });
-         
       },
-      handleScroll(event) {
+      refreshPos() {
          
-         let pos = this.findPosition(this.stickyNav);
-         let top = this.sumBanner + this.top - window.scrollY;
-         //console.log(window.scrollY); 
+         //console.log('refreshPos');
+         this.heightSum = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
          
-         if (top > this.limit) {
-            //console.log('absolute', pos['y']);
-            this.stickyNav.style.position = 'absolute';
-            this.stickyNav.style.left = '-60px';
-         } else {
-            //console.log('fixed', pos['y']);
-            this.stickyNav.style.position = 'fixed';
-            this.stickyNav.style.left = pos['x'] + 'px';
-         }
-         
-         this.switchActive();
+         this.anchors.forEach((anchor, i) => {
+            this.items[i].pos = this.findPos(anchor)['y'];
+         });
       },
-      findPosition(element) {
+      findPos(element) {
          
           let posX = 0, posY = 0;
           do {
@@ -131,6 +112,22 @@ export default {
           
           return pos;
       },
+      handleScroll(event) {
+         
+         let pos = this.findPos(this.stickyNav);
+         let top = this.heightSum + this.top - window.scrollY;
+         //console.log(window.scrollY); 
+         
+         if (top > this.limit) {            
+            this.stickyNav.style.position = 'absolute';
+            this.stickyNav.style.left = '-60px';
+         } else {
+            this.stickyNav.style.position = 'fixed';
+            this.stickyNav.style.left = pos['x'] + 'px';
+         }
+         
+         this.switchActive();
+      },
       switchActive() {
          
          this.items.forEach((item, i) => {
@@ -180,7 +177,8 @@ div#navmap {
             color: #718596b5;
          }
          &.active {
-            color: #e2793d;
+            color: #e2793d; //orange
+            //color: #eec84a; //jaune
          }
       }
    }