Stellar.js на странице reload background-position ошибочно

Question

Я использую плагин jQuery для Stellar.js v0.6.2 для отображения 6 фоновых изображений с эффектом параллакса.

Все работает нормально при первой загрузке страницы, но если я перезагружаю/обновляю его, я вижу, что настройки фонового положения неверны и эффекты параллакса разрушены.

Это Stellar.js настройки, которые я использую:

scrollProperty: 'scroll', 
positionProperty: 'position', 
horizontalScrolling: false, 
verticalScrolling: true, 
horizontalOffset: 0, 
verticalOffset: 0, 
responsive: false, 
parallaxBackgrounds: true, 
parallaxElements: true, 
hideDistantElements: true, 

Это то, что я имею в источнике HTML, в качестве примера:

<section class="visible" id="contact" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="200"></section> 

Это как правильно фон позиция выглядит, когда страница открыт для впервые:

<section class="visible" id="contact" data-stellar-vertical-offset="200" data-stellar-background-ratio="0.6" style="background-position: 30px 82.4701px;"></section> 

Вот как это выглядит, когда я обновить страницу:

<section class="visible" id="contact" data-stellar-vertical-offset="200" data-stellar-background-ratio="0.6" style="background-position: 30px -305.2px;"></section> 

Как вы видите, отрицательное значение -305.2px является тем, что разрушает страницу.

Любая идея, почему это происходит, и что я могу сделать, чтобы предотвратить это?

МЫСЛИ: Это связано с смещениями? Не можете найти ответ, нужна помощь.

Answer 1

Запуск в ту же проблему. Чтобы решить эту проблему, добавьте background-attachment: fixed; в css элемента.

Источник: http://markdalgleish.com/projects/stellar.js/docs/

Answer 2

У меня была такая же проблема. Моя ошибка заключалась в том, что я поместил свой javascript, который вызывает мою функцию stellar.js в голову документа; вместо того, чтобы положить его в тело!

Я не знал о том, что браузер браузера загружает голову только в первый раз, когда сайт введен. поэтому, если вы обновите страницу, она не перезагрузит вашу функцию stellar.js, которую вы положите в голову, поэтому она не будет правильно обновлять значения фоновой позиции.

Путем ввода javascript в тело вы можете убедиться, что сценарий перезагружается каждый раз, когда вы обновляете страницу.

Answer 3

У меня была подобная проблема, но с позиционируемыми элементами изображения, а не с фоновыми изображениями.

Моим первоначальным решением было переместить мой звездный код из события $(document).ready() в $(window).load(). Это привело меня к осознанию того, что размеры изображения недоступны звездным, когда DOM был готов.

После добавления атрибутов высоты и ширины CSS для нестандартных элементов проблема исчезла.

Answer 4

Попробуйте следующее:

responsive: true,