Изображение исчезает при прокрутке до края области просмотра

Некоторым из нас интересно, почему изображения в этом учебном демо исчезают, как только они касаются верха — медленно прокрутите слайд 3 в демо:

http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

я так и не смог разобраться. учебник находится здесь: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/


image jquery parallax
person Zoran M    schedule 31.07.2012    source источник
comment
отлично работает для меня ... что ты спрашиваешь?   -  person Piyush Sardana    schedule 31.07.2012
comment
Я понимаю, что вы имеете в виду, и я согласен, что этого не должно происходить. Однако я уверен, что это связано с плагином stellar, и его отладка в минимизированной форме займет много времени.   -  person ClarkeyBoy    schedule 31.07.2012
comment
да, это был бы ад... странно то, что время от времени в хроме он на самом деле глючит и работает, не исчезая   -  person Zoran M    schedule 31.07.2012

Ответы (5)


arrow_upward
8
arrow_downward

Я нашел ответ: это параметр hideDistantElements, найденный в stellar.js. Вам нужно изменить 0 на 1, фактически отключив его.

Ссылка: https://github.com/markdalgleish/stellar.js/issues/7

person Steve    schedule 21.09.2012
comment
Это действительно странно, мне пришлось установить то же самое значение на 0, чтобы оно работало без исчезновения изображений. - person Aurelio; 28.01.2013

arrow_upward
1
arrow_downward

У меня была та же проблема, и для производительности я не хотел отключать hideDistantElements.

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

Я также изменил имена всех классов с именем «прокрутка» на что-то уникальное, однако я не уверен, что это имело какое-либо значение, потому что именно тогда я заметил проблему с кешем.

Надеюсь, это поможет кому-нибудь, по крайней мере, это сработало для меня.

person Larsss    schedule 06.02.2013
comment
Оказывается, это все еще несовместимо, так как не работает в сафари, думаю, единственное решение - hideDistantElements - person Larsss; 06.02.2013

arrow_upward
0
arrow_downward

У меня тоже была эта проблема. Я заметил, что прокручиваемые элементы начали исчезать слишком рано после определенного div - разница между этим div и другими заключалась в том, что этот div имел css-свойство "float: none".

Попробуйте добавить float: left к элементам div, которые вы прокручиваете.

РЕДАКТИРОВАТЬ: Кроме того, я обнаружил, что ошибка возникает, если вы обновляете страницу, а вы уже прокручиваете половину страницы вниз. Чтобы обойти это, добавьте параметр responsive: true при создании экземпляра stellar.

person Mupps    schedule 15.07.2013

arrow_upward
0
arrow_downward

Нашел решение здесь от автора: https://github.com/markdalgleish/stellar.js-site/issues/1

Нет необходимости скрывать DistantElements. Просто установите размеры div/изображения в вашем css или html.

person dougburnett    schedule 30.08.2013

arrow_upward
0
arrow_downward

Установка размеров div и звездных опций мне не помогла. Исправлена ​​проблема с использованием background-attachment:initial; для прокрутки div.

person PaulSanS    schedule 13.09.2013