Stellar.js 可以在窗口调整大小时重新调整元素偏移量吗？答案

【问题标题】：Can stellar.js readjust element offsets on window resize?Stellar.js 可以在窗口调整大小时重新调整元素偏移量吗？
【发布时间】：2012-09-02 14:10:59
【问题描述】：

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

$.stellar({
    horizontalScrolling: false
});

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

例如，假设您像这样使用 Stellar.js：

$.stellar();

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

$.stellar('refresh');

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

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

希望这可以为您解决所有问题。

【讨论】：

正是我想要的！

【解决方案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();
        }
    });
});

如果元素设置为左/上的原始像素值并不重要，那么您可以一个接一个地调用destroy & init：

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

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

【讨论】：

我的情况差不多，谢谢！这应该作为某种函数包含在函数中，开箱即用的刷新在这种情况下没有帮助，我认为它与使用百分比有关。

【解决方案3】：

我还注意到移动设备上出现奇怪的偏移，这可能是由于 Firefox/Chrome 在向下滚动时调整 web 视图大小的方式，当位置栏再次可见时？

您的问题的答案在documentation 的一部分中：“配置一切”：

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

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

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

【讨论】：