site_logiciels/components/Layout/AnchoredSection.vue

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

<script setup lang="ts">
import type { Ref } from 'vue'
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)

// @ts-ignore
const onScroll = (scroll) => {
  top.value = section.value!.offsetTop
  bottom.value = section.value!.offsetTop + section.value!.offsetHeight

  if (top.value === null || bottom.value === null) {
    return
  }

  const screenVerticalCenter =
    scroll.target.documentElement.scrollTop + window.innerHeight / 2

  const active =
    screenVerticalCenter > top.value && screenVerticalCenter < bottom.value
  if (active !== layoutStore.isAnchoredSectionOnScreen[props.id]) {
    layoutStore.setIsAnchoredSectionOnScreen(props.id, active)
  }
}
</script>

<style scoped lang="scss">
.section {
  //position: relative;
}

.anchor {
  position: relative;
  top: -54px;
}
</style>