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