Question

由于jquery waypoints插件，我有脚本在用户滚动到某一点时动画div的不透明度。问题是动画只会触发一次，我想拥有它，如果用户向上滚动并再次向下滚动它会再次发生。

这是我的脚本，它也使用了modernizr.js。

if ( $("html").hasClass("no-touch") ) {
    $('#main-content').waypoint(function() {
        $('#lvdi').animate({opacity:1}, 600);
    }, { offset: '25%' });
};

HTML

<section id="home">
    <div id="home-inner-wrap" class="outer">
        <div class="inner">
            <div class="row">            
                <div class="col-66 center-66">
                ~ Content ~
                </div>
            </div>
        </div>
    </div>
</section>
<section id="main-content">
 ~ Content ~
</section>

Answer 1

一旦#main-content div不在视图范围内，您将需要重置样式。为此，请在触发航点时添加一个类：

if ( $("html").hasClass("no-touch") ) {
    $('#main-content').waypoint(function() {
        $('#lvdi').animate({opacity:1}, 600);
        $('#lvdi').addClass("animated");

    }, { offset: '25%' });
};

然后使用ScrollSpy插件收听退出事件，重置样式并删除您在视野外时添加的类。

$('#main-content').on('scrollSpy:exit',function(){
    if($(this).hasClass('animated')) {
       $('#lvdi').css({'opacity' : 0}).removeClass('animated');
    }

});

使用jquery航点“重置”div状态

1 个答案: