Divider on scroll (vuejs)

Question

I have a v-navigation-drawer with that contains a sticky header and content underneath it. This content is quite long and what I'd like is to display a divider (or a border-bottom) as I scroll down the page. I know a border-bottom on the "sticky-header" div would do it but I don't want it to appear when the v-navigation-drawer opens, only as I scroll down on it.

This is what my code looks like :

<v-navigation-drawer
  v-if="drawerNodeData"
  class="nav-drawer"
  width="408px"
  dark
  color=#212121
  v-model="drawerNode"
  absolute
  temporary
>
  <div class="node-drawer">
    <div class="sticky_header">
      <div class="close-actor-panel">
        <span></span> <!-- To stick the close icon to the right -->
        <v-btn icon size="0.8em" @click.stop="drawerNode = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </div>
      <v-list-item class="title-and-nb-of-news">
        <span v-if="this.drawerNodeData" class="node-title">{{
          this.drawerNodeData.id.replaceAll("_", " ")
        }}</span>

        <div class="chip-for-news">
          <DrawerNewsModale
            :actorName.sync="actorName"
            :filteredNews.sync="filteredNews"
          ></DrawerNewsModale>
        </div>
      </v-list-item>
    </div>
    <div class="content"></div>
  </div>
</v-navigation-drawer>

Does anyone know what I could do ?

Answer 1

The IntersectionObserver interface of the Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

So, A few lines of IntersectionObserver in JavaScript and tricky usage of top: -1px in the CSS could help to achieve this.

const el = document.querySelector(".sticky-element")
const observer = new IntersectionObserver( 
  ([e]) => e.target.classList.toggle("threshold-reached", e.intersectionRatio < 1),
  { threshold: [1] }
);

observer.observe(el);

#parent { 
  height: 2000px; 
}

.sticky-element {
  position: sticky;
  top: -1px;
  z-index: 1;
  background: yellow;
}

/* styles for when the header is in sticky mode */
.sticky-element.threshold-reached {
  border-bottom: 1px solid black;
}

<div id="parent">
  
  <br />
  <div class="sticky-element">Header</div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>

</div>

Here, a class threshold-reached is toggled according to whether the sticky element reached the threshold or not.
So, a border-bottom will be applied when the header is sticky and removed when not.