Может ли stellar.js скорректировать смещения элементов при изменении размера окна?

Ответ 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 me access the instance of stellar
    // So I can use any of its methods. See stellar 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 и init один за другим:

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

Если вы создаете экземпляр на элементе (т.е. $("#element").stellar(); вместо $.stellar();), замените "окно" на ваш селектор.

Ответ 2

Прежде всего, похоже, что у вас может возникнуть проблема с горизонтальным выравниванием (если предположить, что это вертикальный сайт). Если это так, вероятно, вам нужно только отключить горизонтальную прокрутку:

$.stellar({
    horizontalScrolling: false
});

Если это не решит вашу проблему, Stellar.js имеет недокументированную функцию, которая позволяет обновлять плагин.

Например, предположим, что вы использовали Stellar.js следующим образом:

$.stellar();

Вы можете обновить его следующим образом:

$.stellar('refresh');

Итак, чтобы обновить его при изменении размера, вы можете сделать что-то вроде этого:

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

Надеюсь, это должно исправить все для вас.

Ответ 3

Я также заметил нечетные смещения на мобильных телефонах, которые могут быть вызваны тем, как Firefox/Chrome изменяет размер веб-представления при прокрутке вниз, когда панель местоположений становится видимой снова?

Ответ на ваш вопрос находится в разделе документации: "Конфигурирование всего":

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

Итак, по умолчанию это ложно. Чтобы включить это, используйте .stellar( {responsive:true} )

Реальный вопрос: почему это отключено по умолчанию? Казалось, что я решил проблему, которую я заметил, кроме iOS.