Появление исчезновение элемента при прокрутке страницы. Как реализовать jQuery?

Question

[Arttt]

Добрый день!

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

<script type="text/javascript">
jQuery(function(f){
var element = f('#back-top');
f(window).scroll(function(){
element['fade'+ (f(this).scrollTop() > 200 ? 'In': 'Out')](500);
});
});
</script>

Спасибо !

Comments

[Arttt]

<script type="text/javascript">
jQuery(function(f){
var element = f('#back-top');
f(window).scroll(function(){
element['fade'+ (f(this).scrollTop() > 200 ? 'In': 'Out')](500);
});
});
</script>

Answer 1

[iBird Rose]

берешь функцию $(window).scroll(function(){ ... }); и пишешь в ней что тебе нужно. например сравниваешь с offset какого нить элемента if ($(window).scrollTop()> div.offset().top;)
а потом добавляешь класс элементу при нужном моменте - а по классу уже стилизуешь в css.

Comments

[Arttt]

Спасибо за ответ!
Дело в том, что я создаю сайт для своего духовенства в маленьком поселке, и в силу отсутствия определенных знаний программирования, процесс становится затруднительным. Если Вас не затруднит, прошу, пожалуйста, написать полную структуру этого кода. У меня есть элемент на сайте (изображение) - птица, я ему присвоил id - #sokol, уже неделю пытаюсь сделать этот эффект (взят с сайта mhmgroup.ae/), но все безполезно. Решил понадеяться на помощь профессионалов.