javascript - 如何根据滚动位置在航路点函数内设置不透明度变化动画？

Question

我正在做一个元素，在这里:https://github.com/erinreiss/spaceship1/tree/ministory1

我希望根据滚动位置使 div#landing 在滚动的 200 像素内从不透明度:1 变为不透明度:0。我能够像这样成功地做到这一点:

var target = $('#landing');
var targetHeight = 200;
 $(document).scroll(function(e){
     var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
     if(scrollPercent >= 0){
         target.css('opacity', scrollPercent);
     }
});

现在，我想使用航路点来触发相同的效果，但时间不同。我不希望它在 div#landing 移出视口(viewport)时触发，而是在滚动经过定义的 Waypoint(在本例中为不同的 div#intro1)时触发。

这是我的尝试:

var target = $('#landing');
var targetHeight = 200;
var intro1 = $('#intro1').waypoint(function (direction) {
    console.log('bam!');
    $(document).scroll(function(e){
      var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
        if(scrollPercent >= 0){
            target.css('opacity', scrollPercent);
        }
    })
}, {offset: 200});

航路点触发，但(唉)滚动不透明度更改器不起作用...

有什么建议吗？谢谢!!

ps - 这个问题的另一个线程已经用不再可用的代码回答了:(

How do I animate on scroll inside a waypoint function?

Answer 1

我没有解决这个问题，但我确实把一些东西组合在一起接近我想要的......它允许我使用溢出元素的滚动位置来触发和定义另一个元素的不透明度级别。

请看这里的解决方案: https://github.com/erinreiss/spaceship1/tree/ministory1

var target = $('#intro1inner');
$('#intro1inner').scroll(function(){
      //define a variable that will be how much the target has scrolled from its original position
      var changeA = target.scrollTop()
      console.log('changeA:' + changeA)
    // I want my change in opacity (from 0-1 to take place over 250px)
      var scrollPercent = changeA / 250;
      console.log('scrollPercent:' + scrollPercent)
    });