fix absolute / fixed navbar position

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

@@ -1,6 +1,6 @@
 <template>
    <teleport to="#content_conainter .container.content .container">
-      <div class="sticky-section" id="navmap">
+      <div id="navmap">
          <nav>
             <a href="#top">
                <i class="fa fa-fw fa-square-o"></i>
@@ -44,32 +44,104 @@
 </template>
 
 <script>
-const stickyNav = document.querySelector('#navmap');
 
 export default {
    name: "StickyNav",
+   data() {
+      return {
+         header: document.querySelector("header.navigation.container"),
+         bannerName: document.querySelector("#header-accompanying_course-name"),
+         bannerDetails: document.querySelector("#header-accompanying_course-details"),
+         stickyNav: null,
+         sumBanner: null
+      }
+   },
    computed: {
       accompanyingCourse() {
          return this.$store.state.accompanyingCourse
       },
+      top() {
+         //return window.getComputedStyle(this.stickyNav).getPropertyValue('top'); // 
+         return 30; //px
+      },
+      //sumBanner() {
+      //   return this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
+      //}
    },
    mounted() {
-      this.bing();
+      this.ready();
+      window.addEventListener('scroll', this.handleScroll);  // scroll de la souris
+   },
+   destroyed() {
+      window.removeEventListener('scroll', this.handleScroll);  // scroll de la souris
    },
    methods: {
-      bing() {
+      ready() {
-         console.log('coucou');
 
+         this.stickyNav = document.querySelector('#navmap');
+         this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
+         
+         const resizeObserver = new ResizeObserver(entries => {   // FF/Chrome!
+            
+            console.log('header', this.header.offsetHeight);
+            //this.header = this.header.offsetHeight;
+            console.log('bannerName', this.bannerName.offsetHeight);
+            //this.bannerName = this.bannerName.offsetHeight;
+            console.log('bannerDetails', this.bannerDetails.offsetHeight);
+            //this.bannerDetails = this.bannerDetails.offsetHeight;
+            
+            this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
+            console.log('sum', this.sumBanner);
+            console.log('--');
+            
+         });
+         resizeObserver.observe(this.header);
+         resizeObserver.observe(this.bannerName);
+         resizeObserver.observe(this.bannerDetails);
+         
+      },
+      handleScroll(event) {
+         
+         //console.log('top !!', this.top);
+         //console.log(this.stickyNav);
+         let pos = this.findPosition(this.stickyNav);
+         //console.log(window.scrollY); 
+         console.log('sum2', this.sumBanner);
+         let top = this.sumBanner + this.top - window.scrollY; //pos['y']
+         if (top > 25) {
+            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';
+         }
+      },
+      findPosition(element) {
+          let posX = 0, posY = 0;
+          do {
+              posX += element.offsetLeft;
+              posY += element.offsetTop;
+              element = element.offsetParent;
+          }
+          while( element != null );
+
+          let pos = [];
+          pos['x'] = posX;
+          pos['y'] = posY;
+          
+          return pos;
       }
    }
 }
 </script>
 
 <style lang="scss" scoped>
-div.sticky-section {
+div#navmap {
    position: absolute;
-   top: 33px;
+   top: 30px;
-   left: -10%;
+   left: -60px; //-10%;
    nav {
       font-size: small;
       a {