Question

有没有办法在浏览器/窗口调整大小时重新初始化stellar.js，以便重新调整元素偏移量？

Answer 1

首先，听起来你可能遇到水平对齐的问题（假设它是一个垂直站点）。如果是这样，您可能只需要禁用水平滚动：

$.stellar({
    horizontalScrolling: false
});

如果这不能解决您的问题，Stellar.js有一个未记录的功能，允许您刷新插件。

例如，假设您使用了Stellar.js：

$.stellar();

您可以使用以下内容刷新它：

$.stellar('refresh');

因此，要在调整大小时刷新它，您可以执行以下操作：

$(window).resize(function() {
    $.stellar('refresh');
});

希望这能为你解决所有问题。

Answer 2

经过一番调查后，我发现了这一点。在我的例子中，我有'幻灯片'，它包含我的恒星元素，并且它们的大小适合视口的整个宽度/高度。我需要调整它们的大小以便更改平板电脑。

$(window).resize(function(){
    winHeight = $(window).height();
    $("#scrollWrapper > div").height(winHeight);

    // Find out all my elements that are being manipulated with stellar
    var particles = $(window).data('plugin_stellar').particles;

    // Temporarily stop stellar so we can move our elements around
    // data('plugin_stellar') let's me access the instance of stellar
    // So I can use any of its methods. See stellar's source code
    $(window).data('plugin_stellar').destroy();

    $.each(particles, function(i, el){
        // destroy() sets the positions to their original PIXEL values. 
        // Mine were percentages, so I need to restore that.
        this.$element.css('top', '');

        // Once the loop is finished, re-initialize stellar
        if(particles.length - 1 == i){
            $(window).data('plugin_stellar').init();
        }
    });
});

如果将元素设置为left / top的原始像素值并不重要，那么你可以调用destroy＆amp;一个接一个地开始：

$(window).data('plugin_stellar').destroy();
$(window).data('plugin_stellar').init();

如果您在元素上实例化恒星（即$("#element").stellar();而不是$.stellar();），则将“窗口”替换为您的选择器。

Answer 3

我还注意到移动设备上的奇数偏移可能是由于Firefox / Chrome在向下滚动时调整webview的方式，当位置栏再次可见时会引起错误？

您的问题的答案位于documentation的一部分：“配置所有内容”：

// Refreshes parallax content on window load and resize
responsive: false,

因此，默认情况下这是假的。要启用此功能，请使用.stellar( {responsive:true} )

真正的问题是......为什么默认禁用？它似乎解决了我注意到的问题，除了iOS。

可以在窗口调整大小时重新调整元素偏移量吗？

3 个答案: