site_logiciels/pages/stick.vue

<template>
  <LayoutNavigation />
  <LogicielsSchoolBanner />

  <LogicielsSchoolMenuScroll class="sticky-scroll" />

  <div v-if="shouldShowStickyMenu" id="sticky-menu">
    <v-row class="outil-row">
      <v-col cols="3">
        <div class="container-square">
          <v-row class="blue-square">
            <div>
              <v-icon class="fa-regular fa-comments icon" />
              <p class="text-square">Nous contacter</p>
            </div>
          </v-row>

          <v-row class="blue-square">
            <div>
              <v-icon class="fa-regular fa-circle-info icon" />
              <p class="text-square">Demander une demo</p>
            </div>
          </v-row>

          <v-row class="blue-square">
            <div>
              <v-icon class="fa-brands fa-readme icon" />
              <p class="text-square">Brochure</p>
            </div>
          </v-row>

          <v-row class="darkblue-square">
            <div>
              <v-icon class="fa-solid fa-phone icon" />
              <p class="text-square">Nous Appeler</p>
            </div>
          </v-row>
        </div>
      </v-col>
    </v-row>
  </div>

  <LogicielsSchoolOutil />
  <LogicielsSchoolAvantages />
  <LogicielsSchoolFonctionnalites />
  <LogicielsSchoolPremium />
  <LogicielsSchoolProjet />
  <LogicielsSchoolAccompagnement />
  <LogicielsSchoolReviews />
  <LogicielsSchoolAgenda />
  <LayoutFAQ />
  <LogicielsSchoolSolutions />
  <LayoutFooter id="layout-footer" />
</template>

<script setup>
import { ref, onMounted } from "vue";

const shouldShowStickyMenu = ref(true);

onMounted(() => {
  const stickyMenu = document.getElementById("sticky-menu");
  const footer = document.getElementById("layout-footer");

  const observer = new IntersectionObserver(
    ([entry]) => {
      shouldShowStickyMenu.value = !entry.isIntersecting;
    },
    {
      root: null,
      threshold: 0,
    }
  );

  observer.observe(footer);
});
</script>

<style scoped>

.container-square {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.blue-square,
.darkblue-square {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Barlow";
  width: 10rem;
  height: 7rem;
  margin-left: 14rem;
  padding: 1rem;
}

.blue-square {
  background: rgba(32, 147, 190);
}

.darkblue-square {
  background: #0e2d32;
}

.text-square {
  margin: 0.5rem 2rem;
}

.icon {
  margin-right: 1rem;
}

.icon-logiciel {
  color: rgba(32, 147, 190);
  margin-right: 1rem;
}

.outil-row {
  margin: 5rem 0;
}

#sticky-menu {
  position: sticky;
  top: 10rem;
  z-index: 10;
  margin-left: 89rem;
  margin-bottom: -40rem;
}
</style>