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

【问题标题】：Changing background-color of fixed block at every new screen在每个新屏幕上更改固定块的背景颜色
【发布时间】：2018-04-05 10:15:36
【问题描述】：

有一个使用 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

【问题讨论】：

请阅读文档github.com/alvarotrigo/fullPage.js/#fullpagejs
我认为你没有正确理解我的问题..
固定块“必须改变”它们的背景颜色？你能解释一下这是什么意思吗？
好的，你有 3 张幻灯片，100% 的宽度和高度，左侧的黑色固定列。您滚动一次，固定列将背景颜色更改为粉红色，第二次滚动，它变为蓝色等。

标签： javascript jquery css fullpage.js

【解决方案1】：

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

要更改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

【讨论】：