Каждый раз, когда я использую skrollr, я, кажется, сталкиваюсь с этой проблемой по пути, и я не уверен, в чем проблема. Мне просто нужен простой переход, начинающийся, когда элемент только появляется в поле зрения, и заканчивающийся, когда он покидает поле зрения. Ничего особенного. Нет видового экрана. Не абсолютный.
Я использую следующее:
<section
id="lets-talk"
class="frontpage-section"
data-bottom-top="background-position: 50% 200px;"
data-top-bottom="background-position: 50% 0px;"
data-anchor-target="#lets-talk">
Что-то должно быть не так в приведенном выше коде. Все расчеты происходят не в том месте.
(все 0–200 пикселей упоминаются ниже в отношении положения фона по оси Y)
Я ожидаю, что поведение будет 200 пикселей, если элемент находится внизу экрана, за пределами вашего представления. Когда он находится в центре, он должен быть 100px. Когда он закончит выходить за верхнюю часть экрана, он должен быть 0px.
Но это вообще так не работает. Когда я прокручиваю так, чтобы он был внизу моего экрана, он составлял 94,5 пикселя и останавливался на 0 пикселях, когда он находился в центре моего экрана. Он анимируется за пределами экрана, примерно на половине страницы он наконец достигает 200 пикселей (в два раза больше высоты самого контейнера).
Здесь нет ничего особенного, элемент #lets-talk содержится в статических/относительных элементах, как обычная страница, без определенных позиций высоты или смещений полей/позиций.
Вот рисунок, показывающий разницу между желаемой и фактической областью анимации, на случай, если мое объяснение не поможет:
Посмотрите на скриншот ниже, показывающий изображение, которое явно находится в центре браузера. Установленная позиция фона (видимая в правом верхнем углу) равна 50% 1.821px, а не около 50% 100px.
Как вы понимаете, прокрутка всего на несколько пикселей вниз завершает переход на 50% 0px, элемент все еще четко виден на экране. Вам нужно прокрутить вверх сотни пикселей после того, как элемент находится за пределами экрана, чтобы перейти к началу анимации в 50% 200px.
Других элементов с идентификатором «давайте поговорим» на странице нет.
Skrollr, кажется, находится в каком-то режиме смещения или что-то сбивает с толку.
Дополнительная информация:
CSS (в основном сбрасывает):
background: url(images/app-development.jpg) 50% 0px no-repeat;
background-attachment: fixed;
color: #EFF1C2;
position: relative;
width: auto;
margin: 0 auto;
display: block;
text-align: left;
Контейнеры все позиция: относительная, отображение: блок, без назначенной информации, связанной с высотой/полем/положением. Элемент виден почти на 4500 пикселей вниз по странице. Полный веб-сайт имеет высоту около 5800 пикселей.
Существует элемент #skrollr-body, охватывающий всю страницу без назначенных стилей.
Никакой javascript не мешает этому разделу или любому родительскому разделу.
Версия Skrollr: skrollr 0.6.25 (24 мая 2014 г.)
