Demo

Scroll me down 👇

trigger sidebar highlight

trigger main highlight

trigger ads highlight

example.com

Sidebar

Main

Ads

Other section...

Code

TL;DR

<div ref="sidebarRef" class="h-80vh grid content-center">
        trigger sidebar highlight
</div>
.
.
.
<div class="h-full p-2 border transition-colors ease-in-out"
     :class="sidebarVisible && 'bg-blue-300 outline-dotted-blue-500'">
              Sidebar
</div>

the usehook is based onintersectionObserver MDN.

<script setup lang='ts'>
import { useIntersectionObserver } from '@vueuse/core'

const sidebarRef = ref(null)
const sidebarVisible = ref(false)
// const mainRef = ref(null)
// const mainVisible = ref(false)
// const adsRef = ref(null)
// const adsVisible = ref(false)

useIntersectionObserver(
  sidebarRef,
  ([{ isIntersecting }]) => {
    sidebarVisible.value = isIntersecting
  }, { threshold: 0.6 },
)

// useIntersectionObserver(
//   mainRef,
//   ([{ isIntersecting }]) => {
//     mainVisible.value = isIntersecting
//   }, { threshold: 0.6 },
// )

// useIntersectionObserver(
//   adsRef,
//   ([{ isIntersecting }]) => {
//     adsVisible.value = isIntersecting
//   }, { threshold: 0.6 },
// )
</script>

Happy learning ✨