|
|
@@ -0,0 +1,179 @@
|
|
|
+<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>
|
