使用 intersectionObserver 和 fullpage.js 更改滚动时的 header 样式

Question

我是 front-end 开发的新手。我目前正在做一个项目，试图在使用 intersectionObserver 滚动时改变我的 header 样式。我还使用 fullpage.js 来创建整页过渡效果。但是，我遇到的问题是，当我滚动时，浏览器认为第 1 节和第 2 节是同一节，header 样式只会在我滚动到第 3 节时发生变化。谁能告诉我发生了什么事？也许我错过了什么。

我使用的代码在这里：

 <div class="header">
        <a href="#">
            <h1>logo<h1>
        </a>
        <nav>
            <ul class="nav-link">
                <li><a href="#">projects</a></li>
                <li><a href="#">about</a></li>
            </ul>
        </nav>
    </div>
          
   <div id="fullpage">
        <div class="section s1">
        </div>
        
        <div class="section s2">
        </div>
        <div class="section s3">
    
        </div>
        <div class="section s4">
        </div>

    </div>       
          
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>```

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

body {
  background: #070520;
}
.header {
  --text: #fff;
  --background: transparent;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 999;
  padding: 1rem 6.5rem 0 1.5rem;
  background-color: var(--background);
}


.header a {
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--text);
  font-family: "Helvetica", sans-serif;
  font-weight: 100;
  letter-spacing: 0;
}


.header .nav-link {
  list-style: none;
}

.header .nav-link li {
  display: inline-block;
  bottom: 0;
  padding: 0px 10px;
}

.header-scrolled {
  --text: #070520;
}

.s2 {
  background-color: grey;
}

.s3 {
  background-color: green;
}

.s4 {
  background-color: blue;
}

new fullpage("#fullpage", {
    scrollingSpeed: 1000,
});

const header = document.querySelector('.header');
const sectionOne = document.querySelector('.s1');

const sectionOneOptions = {};

const sectionOneObserver = new IntersectionObserver(function(entries,sectionOneObserver){
    entries.forEach(entry=>{
       if(!entry.isIntersecting){
           header.classList.add('header-scrolled')
       }else{
           header.classList.remove('header-scrolled')
       }
    })
},sectionOneOptions);

sectionOneObserver.observe(sectionOne);

https://codepen.io/Austin020304/pen/WNwjqaO

谢谢！

Answer 1

考虑为此使用 fullPage.js state classes or callbacks。

此外，不要忘记检查回调示例： https://github.com/alvarotrigo/fullPage.js/tree/master/examples

您可能还想查看 this video tutorial 我确实利用状态类来创建动画。

使用 intersectionObserver 和 fullpage.js 更改滚动时的 header 样式

Changing header style on scroll using intersectionObserver and fullpage.js

javascript

fullpage.js