12

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

4

3 回答 3

14

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

$.stellar({
    horizontalScrolling: false
});

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

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

$.stellar();

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

$.stellar('refresh');

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

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

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

于 2012-11-04T22:04:22.530 回答
13

经过一番摸索，我已经弄清楚了这一点。就我而言，我有“幻灯片”，其中包含我的恒星元素，它们的大小与视口的全宽/高度一致。我需要调整它们的大小以改变平板电脑的方向。

$(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”替换为您的选择器。

于 2012-09-26T19:33:00.997 回答
7

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

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

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

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

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

于 2014-01-11T02:11:48.500 回答