site_logiciels/components/Layout/AnchoredSection.vue

<template>
  <div
    :id="id"
    ref="section"
    v-scroll="onScroll"
  >
    <slot/>
  </div>
</template>

<script setup lang="ts">
  import { useLayoutStore } from "~/stores/layoutStore";

  const layoutStore = useLayoutStore()

  const props = defineProps({
    id: {
      type: String,
      required: true
    }
  })

  if (!props.id) {
    throw new Error("Anchor's id is missing")
  }

  const section: Ref<HTMLElement | null> = ref(null)

  layoutStore.setIsAnchoredSectionOnScreen(props.id, false)

  const top: Ref<number | null> = ref(null)
  const bottom: Ref<number | null> = ref(null)

  onMounted(() => {
    top.value = section.value!.offsetTop
    bottom.value = section.value!.offsetTop + section.value!.offsetHeight
  })

  const onScroll = (e: any) => {
    if (top.value === null || bottom.value === null) {
      return
    }

    const screenVerticalCenter = document.documentElement.scrollTop + window.innerHeight / 2

    const active = screenVerticalCenter > top.value && screenVerticalCenter < bottom.value


    if (active !== layoutStore.isAnchoredSectionOnScreen[props.id]) {
      nextTick(() => {
        layoutStore.setIsAnchoredSectionOnScreen(
          props.id,
          active
        )
      })
    }
  }
</script>

<style scoped>

</style>