Question

想知道你们是否可以指引我朝着正确的方向前进，我的大脑现在因为拉扯全能而有点油腻。

我试图使用Waypoints插件来实现应该相对容易的任务，该插件在视图中将一个类添加到div时将其切换为完全不透明度。当用户继续向下（或向上）向下滚动时，通过删除该类将该类淡出，然后将该类应用于视图中的下一个div。

我找到了一个能够达到预期效果的网站，我在这里寻找： http://www.araujoestate.com/pages/the-land.html

我相信答案在于＆＃34; Above＆＃34;和＆＃34;以下＆＃34;回调？

感谢您对此进行任何输入。

已更新

我开发了以下JSFiddle：
http://jsfiddle.net/nbgdzspy/2/

我正在寻找我想要的效果，但是想知道是否有一种更清晰的方式来接近代码......似乎相当笨重。

$('#test1').waypoint(function(direction) {
    if (direction === 'down') {
        $(this).addClass("waypoint-here");
    }
}, {
    offset: '50%'
}).waypoint(function(direction) {
    if (direction === 'up') {
        $(this).addClass("waypoint-here");
        $("#test2").removeClass("waypoint-here");
    }
}, {
    offset: '25%'
});

$('#test2').waypoint(function(direction) {
    if (direction === 'down') {
        $("#test1").removeClass("waypoint-here");
        $(this).addClass("waypoint-here");
    }
}, {
    offset: '50%'
}).waypoint(function(direction) {
    if (direction === 'up') {
        $(this).addClass("waypoint-here");
        $("#test3").removeClass("waypoint-here");
    }
}, {
    offset: '25%'
});

Answer 1

我认为我找到了一个相当简单的解决方案来解决我的问题......令人惊讶的是，新鲜空气可以做些什么。

这是我计划实施的代码：

$(function() {
    $('.waypoint').waypoint(function(direction) {
        if (direction === 'down') {
            $(this).addClass("waypoint-here");
            $(this).prev().removeClass("waypoint-here");
        }
    }, {
        offset: '50%'
    }).waypoint(function(direction) {
        if (direction === 'up') {
            $(this).addClass("waypoint-here");
            $(this).next().removeClass("waypoint-here");
        }
    }, {
        offset: '0'
    }); 
});

你可以在这里看到它： http://jsfiddle.net/nbgdzspy/6/

使用Waypoint在视图中淡入div，同时在滚动时淡出剩余的div

1 个答案: