[Solved] Changing background-color of fixed block at every new screen

by


You can change the background color of that fixed div by using the index or anchorLink option in fullpage.js.

To change the css you can use onLeave() or afterLoad() method to call the function

$(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

0

solved Changing background-color of fixed block at every new screen