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

<template>
  <teleport to="#content">
    <div id="navmap">
      <nav>
        <a
          class="top"
          href="#top"
        >
          <i class="fa fa-fw fa-square" />
          <span>{{ $t('nav.top') }}</span>
        </a>
        <item
          v-for="item of items"
          :key="item.key"
          :item="item"
          :step="step"
        />
      </nav>
    </div>
  </teleport>
</template>

<script>
import Item from './StickyNav/Item.vue';

export default {
   name: "StickyNav",
   components: {
      Item
   },
   data() {
      return {
         header: document.querySelector("header nav.navbar"),
         bannerName: document.querySelector("#header-accompanying_course-name"),
         bannerDetails: document.querySelector("#header-accompanying_course-details"),
         container: null,
         heightSum: null,
         stickyNav: null,
         limit: 25,
         anchors: null,
         items: [],
      }
   },
   computed: {
      accompanyingCourse() {
         return this.$store.state.accompanyingCourse;
      },
      step() {
         return this.accompanyingCourse.step;
      },
      top() {
         return parseInt(window.getComputedStyle(this.stickyNav).getPropertyValue('top').slice(0, -2));
      },
   },
   mounted() {
      this.ready();
      window.addEventListener('scroll', this.handleScroll);
   },
   unmounted() {
      window.removeEventListener('scroll', this.handleScroll);
   },
   methods: {
      ready() {

         // load datas DOM when mounted ready
         this.container = document.querySelector("#content");
         this.stickyNav = document.querySelector('#navmap');
         this.anchors = document.querySelectorAll("h2 a[id^='section']");
         this.initItemsMap();

         // TODO resizeObserver not supports IE !
         // Listen when elements change size, then recalculate heightSum and initItemsMap
         const resizeObserver = new ResizeObserver(() => {
            this.refreshPos();
         });

         resizeObserver.observe(this.header);
         resizeObserver.observe(this.bannerName);
         resizeObserver.observe(this.bannerDetails);
         resizeObserver.observe(this.container);
      },
      initItemsMap() {

         this.anchors.forEach(anchor => {
            this.items.push({
               pos: null,
               active: false,
               key: parseInt(anchor.id.slice(8).slice(0, -1)),
               id: '#' + anchor.id
            })
         });
      },
      refreshPos() {

         //console.log('refreshPos');
         this.heightSum = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;

         this.anchors.forEach((anchor, i) => {
            this.items[i].pos = this.findPos(anchor)['y'];
         });
      },
      findPos(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;
      },
      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 = '10px';
         } else {
            this.stickyNav.style.position = 'fixed';
            this.stickyNav.style.left = pos['x'] + 'px';
         }

         this.switchActive();
      },
      switchActive() {

         this.items.forEach((item, i) => {
            let next = (this.items[i+1]) ? this.items[i+1].pos : '100000';
            item.active =
                (window.scrollY >= item.pos & window.scrollY < next) ? true : false;
         }, this);

         // last item never switch active because scroll reach bottom of page
         if (document.body.scrollHeight == window.scrollY + window.innerHeight) {
            this.items[this.items.length-1].active = true;
            this.items[this.items.length-2].active = false;
         } else {
            this.items[this.items.length-1].active = false;
         }
      }
   }
}
</script>

<style lang="scss">
div#content {
   position: relative;

   div#navmap {
      position: absolute;
      top: 30px;
      left: 10px; //-10%;
      nav {
         font-size: small;
         a {
            display: block;
            box-sizing: border-box;
            margin-bottom: -3px;
            color: #71859669;
            text-decoration: none;
            &.top {
               color: #718596;
            }
            span {
               display: none;
            }
            &:hover,
            &.active {
               span {
                  display: inline;
                  padding-left: 8px;
               }
            }
            &:hover {
               color: #718596b5;
            }
            &.active {
               color: #e2793d; //orange
               //color: #eec84a; //jaune
            }
         }
      }
   }
}
@media only screen and (max-width: 768px) {
   div#navmap {
      display: none;
   }
}
</style>