Question

有一个页面使用带有固定块的fullPage.js，每当我滚动每个新屏幕时，必须每次都改变它们的背景颜色。无法理解我怎样才能做到。请给我任何建议！

#include <iostream>
#include<vector>
std::vector<int> print(std::vector<int> answerVec){
    for(int i = 0; i < answerVec.size(); i++){
        std::cout<<answerVec.at(i)<<" ";
    }
    std::cout<<"\n";
    return answerVec;
}
std::vector<int> Merge(std::vector<int> left, std::vector<int> right){
    int leftSize = left.size();
    int rightSize = right.size();
    std::vector<int> finalVector;
    int leftIterator = 0, rightIterator = 0;
    while(leftIterator < leftSize && rightIterator < rightSize){
        //std::cout<<"Left"<<left.at(leftIterator)<<"\n";
        //std::cout<<"Right"<<right.at(rightIterator)<<"\n";
        if((int)left.at(leftIterator) <= (int)right.at(leftIterator)){
            finalVector.push_back(left.at(leftIterator));
            leftIterator ++;
        }
        else{
            finalVector.push_back(right.at(rightIterator));
            rightIterator++;
        }
        //print(finalVector);
    }
    while(leftIterator < leftSize){
        finalVector.push_back(left.at(leftIterator));
        leftIterator ++;
        //print(finalVector);
    }
    while(rightIterator < rightSize){
        finalVector.push_back(right.at(rightIterator));
        rightIterator++;
        //print(finalVector);
    }
    return finalVector;
}
int main(){
    std::vector<int> vecL,vecR,vec;
    int n,input;
    std::cin>>n;
    for(int i = 0; i < n; i++){
        std::cin>>input;
        vecL.push_back(input);
    }
    for(int i = 0; i < n; i ++){
        std::cin>>input;
        vecR.push_back(input);
    }
    vec = Merge(vecL, vecR);
    for(int i = 0; i < vec.size(); i++){
        std::cout<<vec.at(i)<<" ";
    }
    return 0;
}

example of page on codepen.io

Answer 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

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

1 个答案: