Как показать элемент при скролле вверх?

Question

[Наталия]

Добрый день!

Подскажите, пожалуйста, как правильно сделать анимацию при скролле снизу вверх.

Суть самой анимации в следующем: при скролле вниз отображается первая картинка, затем, двигаясь дальше, она убирается и появляется вторая картинка. Возвращаясь вверх, действует обратный принцип: вторая картинка, затем она убирается и отображается первая картинка.

Помогите, пожалуйста, разобраться с вопросом.

Заранее спасибо.

*
Ответ тут: https://jsfiddle.net/ad0ozwda/39/

Answer 1

[Наталия]

Ответ тут: https://jsfiddle.net/ad0ozwda/39/

Answer 2

[Anton fon Faust]

Конечно, не работает - у вас в консоли красное все.

Comments

[Наталия]

там, видимо, какая-то проблема у фидлера с подключением библиотеки jquery.
убрала пока ее вовсе.

[Anton fon Faust]

Наталия, Нет там проблемы. Проблема в коде.
jsfiddle открывается через https, а вы суете туда библиотеки по http.

[Anton fon Faust]

Плюс, где у вас в коде определяется scrollContainer?
Uncaught ReferenceError: scrollContainer is not defined

[Наталия]

Anton fon Faust, Anton fon Faust, как сделать правильно? раньше просто пользовалась ресурсом - все норм было. Что-то, видимо, изменилось в этом плане. Но если Вы знаете как подключить там библиотеку правильно, то можете сообщить.

[Anton fon Faust]

Наталия, нижняя четверть (где скрипты) в попапе заголовка выбираете то, что вам нужно...
только версию подходящую выберите.
А сервис к вашему scrollContainer ни при чем - у вас в коде его нет.
Копипастить надо внимательнее.

[Наталия]

Anton fon Faust, я ж вот тут до этого и выбирала те варианты, которые мне нужны (далее скрин) - с ними тоже вылезают ошибки.


я сейчас scrollContainer не рассматриваю пока что. Сначала тогда с библиотекой надо разобраться, раз ошибки есть по ней в консоли, а затем по самому коду - почему не робит.

[Anton fon Faust]

А вы уверены, что jquery ui выбранный с указанным jquery mobile совместим?

[Anton fon Faust]

Наталия, Во всяком случае без jquery mobile у меня ругается только на scrollContainer

[Наталия]

Anton fon Faust, да, убрала mobile
Если у Вас есть конкретные предложения / правки в тот текст, который сейчас имеется. Пожалуйста, сообщите. Заранее премного благодарна за помощь.

[Anton fon Faust]

Наталия, где должны появляться первая и вторая картинки?

[Наталия]

Anton fon Faust, слева от текстового блока напротив него. Горизонтальные середины обоих блоков - на одном уровне.

[Наталия]

Anton fon Faust, чуть поправила, посмотрите, пожалуйста, как анимацию правильно применить? она почему-то не срабатывает...(

https://jsfiddle.net/ad0ozwda/20/

[Anton fon Faust]

Наталия,
Во-первых, скроллится у вас не контейнер, а window, соответсвенно, нужно прописать вот так:
var scrollContainer = $(window);

Во-вторых, лучше анимировать с помощью css, назначая класс с анимацией при определенных позициях скролла.

[Наталия]

Anton fon Faust, я внесла правки, теперь можно посмотреть суть анимации наглядно:
https://jsfiddle.net/ad0ozwda/39

[Наталия]

Anton fon Faust, большое спасибо за комментарии.