时间戳

首页 > 解决方案 > 如何在 Fullpage.js 上滚动时更改类的背景颜色？

javascript - 如何在 Fullpage.js 上滚动时更改类的背景颜色？

问题描述

我有一个带有 .header 类的 div，我希望它的背景颜色在滚动时变为透明。我怎么能在javascript上做到这一点？我使用 fullpage.js 插件，顺便说一句，只有 2 个部分。

<body>
  <div class="header">

      CONTENTS HERE
        
</div>
<div id="fullPage">
  <div class="section bg">
        
       CONTENTS HERE

  </div>

  <div class="section aboutme">
     
      CONTENTS HERE

  </div>
</div>
</body>

.header {
background-color: rgba(0, 0, 0, 0.2);
text-align: center;
padding: 8px 15px;
overflow: hidden;
min-height: 46px;
position: absolute;
width: 100%;
top: 0;
z-index: 999;

标签： javascripthtmlcssfullpage.js

解决方案

您可以使用fullpage.js 状态类或回调来完成它。

这是使用整页状态类的示例： https ://codepen.io/alvarotrigo/pen/VwbxbYR

.fp-viewing-1-0 button{
    background: blue;
}

fp-viewing-1-0基本上意味着 fullpage.js 在第二部分和第一张幻灯片上。因此，部分和幻灯片都使用基于 0 的索引。

这是另一个使用回调的示例： https ://codepen.io/alvarotrigo/pen/XbPNQv

fullpage.js 文档中的更多示例

    afterLoad: function(origin, destination, direction){
        var loadedSection = this;

        //using index
        if(origin.index == 2){
            alert("Section 3 ended loading");
        }

        //using anchorLink
        if(origin.anchor == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }

推荐阅读