Question

我正在开展一个项目，在这里：https://github.com/erinreiss/spaceship1/tree/ministory1

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

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移出视口时触发它，而是在定义的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)
    });

如何根据滚动位置为航点功能内的不透明度变化设置动画？

1 个答案: