site_logiciels/components/Formation/MenuScroll.vue

<template>
  <LayoutContainer>
    <v-row >
      <v-col
        cols="12"
        class="menu-container"
        :class="{ 'sticky-menu': isSticky }"
      >
        <div
          v-for="menu in menus"
          :key="menu.label"
          @click="navigate(menu)"
        >
          <v-chip
            v-if="activeMenu === menu.label"
            class="active-menu"
          >
            {{
              menu.label
            }}
          </v-chip>
          <span v-else>{{ menu.label }}</span>
        </div>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from 'vue';

const refs = reactive({
  Presentation: null,
  Catalogue: null,
  Financement: null,
  Certification: null,
  Inscription: null,
  Evaluation: null,
});
const menus = [
  { label: 'Présentation' },
  { label: 'Catalogue' },
  { label: 'Financement' },
  { label: 'Certification' },
  { label: 'Inscription' },
  { label: 'Evaluation' },
];
const isSticky = ref(false);

const handleScroll = () => {
  const scrollPosition = window.scrollY;

  if (scrollPosition > 800) { 
    isSticky.value = true;
  } else {
    isSticky.value = false;
  }

  for (const key of Object.keys(refs)) {
    const element = refs[key];
    if (element) {
      const top = element.offsetTop;
      const bottom = top + element.offsetHeight;
      if (scrollPosition >= top && scrollPosition < bottom) {
        activeMenu.value = key;
        break;
      }
    }
  }
};

onMounted(() => {
  Object.keys(refs).forEach(key => {
    refs[key] = document.getElementById(key);
  });

  window.addEventListener('scroll', handleScroll);
});

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});


const activeMenu = ref(menus[0].label);

const navigate = (menu) => {
  activeMenu.value = menu.label;
  const element = document.getElementById(menu.label);
  if (element) {
    element.scrollIntoView({ behavior: "smooth" });
  }
};
</script>

<style scoped>

.sticky-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.menu-container {
  z-index: 3;
  display: flex;
  justify-content: space-around;
  background: white;
  color: #071b1f;
  font-family: "Barlow";
  font-size: 1rem;
  line-height: 19px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 0.1rem solid #eaeaea;
}
.v-chip.active-menu {
  background: var(--Vert-100, #091D20);;
  color: white;
}

.menu-container div:hover {
  cursor: pointer;
  text-decoration: underline;
  z-index: 15;
}
</style>