Question

我有一些类似的部分：

<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>

我尝试做的是，当我滚动section1时，它会淡出并section2淡入。当我向section2向下滚动时，section3会淡入当我向上滚动section1淡入时。

我用这个JS尝试过：

var lastScrollTop = 0;
$("#section1").scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        $(this).fadeOut();
        $("#section2").fadeIn();
   } else {

   }
   lastScrollTop = st;
});

var lastScrollTop = 0;
$("#section2").scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        $(this).fadeOut();
        $("#section3").fadeIn();
   } else {
        $(this).fadeOut();
        $("#section1").fadeIn();
   }
   lastScrollTop = st;
});

var lastScrollTop = 0;
$("#section3").scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){

   } else {
        $(this).fadeOut();
        $("#section2").fadeIn();      
   }
   lastScrollTop = st;
});

但它只是在没有任何fadeIn（）或fadeOut（）的情况下保持正常滚动。有什么方法可以解决这个或更好的方法吗？

Answer 1

看看https://scrollrevealjs.org/它应该做你需要的。如果我做对了。

Answer 2

有一个名为waypoints的优秀插件可以与animate.css一起使用，你很高兴。

滚动时fadeOut div并淡入其他div

3 个答案: