Question

我有一个固定的jParallax - http://webdev.stephband.info/jparallax/index.html - 背景页面元素，滚动固定的“parallaxing”背景。

问题：插件仅在当前视口中有效，如果向下滚动并且已应用固定定位，则会停止工作。所以我想在我滚动时禁用jParallax效果，当我停止滚动时重新启用。

为了控制滚动事件我正在使用jQuery的James Padolsey特殊滚动事件：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

我通过使用devin R. Olsen的{jQuery zLayers Parallax Plugin - http://www.devinrolsen.com/jquery-zlayers-parallax-plugin/找到了问题的解决方案。

我仍在使用James Padolsey的jQuery特殊滚动事件：http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

还没有在IE上测试过，但是如果我在具有视差效果的固定全屏背景上滚动页面元素，这似乎在大多数浏览器上都能正常工作。语法类似于：

    jQuery(window).bind('scrollstop', function(e){   
        $('#plax-1').zlayer({mass:5,confine:'push',canvas:'#parallax'});
        $('#plax-2').zlayer({mass:15,force:'push',canvas:'#parallax'});
        $('#plax-3').zlayer({mass:25,force:'push',canvas:'#parallax'});             
    });

希望这可能对某人有用。

Answer 2

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

的组合

plax - jQuery parallax插件，支持动态启用/禁用视差 https://github.com/cameronmcefee/plax
jQuery Waypoints - 用于检测用户何时滚动到某个点＆amp;触发行动 http://imakewebthings.com/jquery-waypoints/

以下是一些结合两者的示例代码：

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

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

2 个答案: