stellar.js可以重新调整窗口大小的元素偏移吗？

Question

有没有一种方法来重新初始化浏览器/窗口上的stellar.js调整大小，以便元素偏移重新调整？

Answer 1

经过一番调查之后，我发现了这一点。在我的情况中，我有'幻灯片'，它包含我的恒星元素，并且它们的大小为视口的整个宽度/高度。我需要调整它们以改变平板电脑的方向。

$(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 &初始化一个接一个：

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

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

Answer 2

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

$.stellar({ 
    horizontalScrolling: false 
}); 

如果这不能解决您的问题，Stellar.js有一个未公开的功能，让你刷新插件。

例如，假设你使用Stellar.js这样的：

$.stellar(); 

您可以通过以下刷新：

$.stellar('refresh'); 

因此，刷新它调整大小，你可以这样做这样的事情：

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

希望这应该为您解决一切。

Answer 3

我还注意到，当位置栏变为可见时，Firefox/Chrome在向下滚动时调整webview的方式可能会导致移动设备出现奇怪的偏移？

的回答你的问题是在documentation的一段：“配置一切”：

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

所以，这是默认为false。要启用此功能，请使用.stellar({responsive:true})

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