在每个新屏幕上更改固定块的背景颜色

Question

有一个页面使用 fullPage.js 固定块，当我滚动每个新屏幕时，必须每次都更改其背景颜色。不明白我该怎么做。任何建议，请！

<div class="fixed"></div>
<div id="fullpage">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

example of page on codepen.io

Answer 1

您可以使用 index 或 anchorLink option in fullpage.js 更改固定 div 的背景颜色。 =19=]

要更改 css 您可以使用 onLeave() 或 afterLoad() 方法调用函数

$(document).ready(function() {
  $('#fullpage').fullpage({
    onLeave: function(anchorLink, index) {
      //using index
      if (index == 1) {
        $(".fixed").css("background-color", "black");
      }
      if (index == 2) {
        $(".fixed").css("background-color", "blue");
      }
      if (index == 3) {
        $(".fixed").css("background-color", "red");
      }
    }
  });
});

body {
  margin: 0;
}

.fixed {
  width: 25%;
  height: calc(100vh - 50px);
  background-color: #000;
  margin: 25px;
  float: left;
  position: fixed;
  z-index: 1;
}

.section {
  width: 100%;
  height: 100vh;
  background-color: pink;
}

.section:nth-of-type(2) {
  background-color: green;
}

.section:last-of-type {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.min.js"></script>
<div class="fixed"></div>
<div id="fullpage">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

Updated Codepen

在每个新屏幕上更改固定块的背景颜色

Changing background-color of fixed block at every new screen

javascript

jquery

css

fullpage.js