fashion-ssr-vue3/pages/test.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const navRef = ref<HTMLElement | null>(null)
const currentSection = ref('')

function updateNavBackground(section: Element) {
  const backgroundColor = window.getComputedStyle(section).backgroundColor
  if (navRef.value)
    navRef.value.style.backgroundColor = backgroundColor
}

onMounted(() => {
  // Intersection Observer for when sections come into view
  const observer = new IntersectionObserver(
    (entries) => {
      console.log('scrollPosition---------1')

      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          currentSection.value = entry.target.id
          updateNavBackground(entry.target)
        }
      })
    },
    {
      threshold: 0.5,
      rootMargin: '-80px 0px 0px 0px', // Adjust based on your nav height
    },
  )

  // Observe all sections
  document.querySelectorAll('.section').forEach((section) => {
    observer.observe(section)
  })

  // Scroll event handler for continuous updates
  // 获取id为app-scroller的元素
  const appScroller = document.getElementById('app-scroller')
  appScroller.addEventListener('scroll', () => {
    console.log('scrollPosition---------2', appScroller?.scrollTop)
    const sections = document.querySelectorAll('.section')
    const scrollPosition = window.scrollY + 80 // Add nav height offset

    sections.forEach((section) => {
      const sectionTop = section.offsetTop
      const sectionHeight = section.offsetHeight

      if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight)
        updateNavBackground(section)
    })
  })
})
</script>

<template>
  <div class="app">
    <nav ref="navRef" class="navigation">
      <div class="nav-content">
        <h1>Logo</h1>
        <div class="nav-links">
          <a href="#section1">Section 1</a>
          <a href="#section2">Section 2</a>
          <a href="#section3">Section 3</a>
          <a href="#section4">Section 4</a>
        </div>
      </div>
    </nav>

    <main>
      <section id="section1" class="section" style="background-color: #f8f9fa;">
        <h2>Section 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>

      <section id="section2" class="section" style="background-color: #e9ecef;">
        <h2>Section 2</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </section>

      <section id="section3" class="section" style="background-color: #dee2e6;">
        <h2>Section 3</h2>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </section>

      <section id="section4" class="section" style="background-color: #ced4da;">
        <h2>Section 4</h2>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </section>
    </main>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.app {
  min-height: 100vh;
  width: 100%;
}

.navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  transition: background-color 0.3s ease;
  z-index: 1000;
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #000;
}

main {
  padding-top: 80px;
  width: 100%;
}

.section {
  min-height: 100vh;
  width: 100%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

h1 {
  margin: 0;
  font-size: 24px;
}

h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

p {
  max-width: 600px;
  line-height: 1.6;
  margin: 0;
}
</style>