javascript - 如何在滚动时禁用 jQuery jParallax 插件并在滚动停止时重新启用？

Question

我有一个固定的 jParallax – http://webdev.stephband.info/jparallax/index.html – 带有在固定“视差”背景上滚动的页面元素的背景。

问题:该插件仅适用于当前视口(viewport)，如果您向下滚动并应用了固定定位，该插件将停止工作。所以我想在滚动时禁用 jParallax 效果，并在停止滚动时重新启用。

为了控制滚动事件，我使用 James Padolsey 的 jQuery 特殊滚动事件:http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

我试过这样的:

    jQuery(window).bind('scrollstart', function(){
        jQuery('#parallax').jparallax({mouseResponse: false});
    });

    jQuery(window).bind('scrollstop', function(e){          
        jQuery('#parallax').jparallax({mouseResponse: true},{triggerExposesEdges: true}, {xtravel:0.2, ytravel:0.2}, {xtravel:0.6, ytravel:0.6}).append(corners);
    });

这会触发许多 jparallax 实例并且无法正常工作。

有人知道如何正确禁用 jparallax 或有人写过 Stephen Band 对原始插件的更新吗？

是否有任何具有适当“禁用”功能的等效插件替代品？

感谢您的帮助!

Answer 1

对于那些仍在寻找解决方案的人来说，jQuery zLayers 已经过时了，我建议结合使用

1. plax - 支持动态启用/禁用视差的 jQuery 视差插件 https://github.com/cameronmcefee/plax

2. jQuery Waypoints - 用于检测用户何时滚动到特定点并触发操作 http://imakewebthings.com/jquery-waypoints/

下面是结合两者的一些示例代码:

    $('#some-div').waypoint(function(direction) {
        if (direction == "down"){
            $.plax.disable();
        }
        else {
            $.plax.enable();
        }
    });