html - 使用 Waypoints 的 addClass 和 removeClass 触发器

Question

我正在制作一个水平视差滚动条的网站。我的意图是通过在改变不透明度的同时上下移动渐变(div 100vw, 300vh)来产生从黎明到夜晚的环境效果。当某个 div 进入视口(viewport)时，我希望 javascript 触发所需的操作。

我正在使用 jquery、Waypoints 和 jInvertScroll。

我从控制台得到这个:

<div class="dawndusk"></div>当一切都在开始的时候。 <div class="dawndusk lettherebenight"></div>当我滚动到 #dawn .当我滚动到其他 div 时，没有任何变化。为什么？

这是我的HTML

<div class="dawndusk"></div>

    <div class="flex" id="birth">
        ...content...
    </div>

    <div class="flex" id="dawn">
        ...content...
    </div>

    <div class="flex" id="day">
        ...content...
    </div>

    <div class="flex" id="dusk">
        ...content...
    </div>

    <div class="flex" id="night">
        ...content...
    </div>  

这是我的CSS

.dawndusk {
    z-index:750;
    opacity: .9;

    background: #4B79A1;
    background: -webkit-linear-gradient(to top, #f6d365 0%, #fda085 50%, #283E51 50%, #0A2342 100%);
    background: -olinear-gradient(to top, #f6d365 0%, #fda085 50%, #283E51 50%, #0A2342 100%);
    background: linear-gradient(to top, #f6d365 0%, #fda085 30%, #283E51 60%, #0A2342 100%);

    width:100vw;
    height:300vh;
    position:fixed;
}

#birth,
#dawn,
#day,
#dusk,
#night {
position: absolute;
top:0;
}

#birth {
left:0; 
}
#dawn {
left:100vw; 
}
#day {
left:200vw; 
}
#dusk {
left:300vw; 
}
#night {
left:400vw; 
}

.lettherebebirth,
.lettherebedawn,
.lettherebeday,
.lettherebedusk,
.lettherebenight {
    transition: all 4s;
    -webkit-transition: all 4s;
}

.lettherebebirth {
    opacity: .9;
    transform: translateY(0);

}

.lettherebedawn {
    opacity: .2;
    transform: translateY(-200vh);
}

.lettherebeday {
    opacity: 0;
    transform: translateY(0);
}

.lettherebedusk {
    opacity: .5;
    transform: translateY(-200vh);
}

.lettherebenight {
    opacity: .8;
    transform: translateY(-200vh);
}

Javascript 是这样的:

$('#birth').waypoint(function(direction) {
  if (direction === 'up') {
    $('.dawndusk').removeClass('lettherebedawn');
    $('.dawndusk').addClass('lettherebebirth');
  }
});

$('#dawn').waypoint(function(direction) {
  if (direction === 'down') {
    $('.dawndusk').removeClass('lettherebebirth');
    $('.dawndusk').addClass('lettherebedawn');
  }
});

$('#day').waypoint(function(direction) {
  if (direction === 'down') {
    $('.dawndusk').removeClass('lettherebedawn');
    $('.dawndusk').addClass('lettherebeday');
  }
});

$('#dusk').waypoint(function(direction) {
  if (direction === 'down') {
    $('.dawndusk').removeClass('lettherebeday');
    $('.dawndusk').addClass('lettherebedusk');
  }
});

$('#night').waypoint(function(direction) {
  if (direction === 'down') {
    $('.dawndusk').removeClass('lettherebedusk');
    $('.dawndusk').addClass('lettherebenight');
  }
});

如何让需要的类(class)在我想要的时候开启和关闭？

Answer 1

我自己想出来的。

jInvertscroll 代表垂直滚动模仿水平滚动。因此，尽管屏幕和代码上的一切看起来都很好，但问题是航路点触发器都放置在水平轴上。它应该在垂直轴上。

#birth {
        top:0;
}
#dawn {
        top:100vw;
}
#day {
        top:200vw;
}
#dusk {
        top:300vw;
}
#night {
        top:400vw;
}