Появление элемента на странице при прокрутке

Продолжая тему интерактивных элементов на странице сайта, хотелось бы коснуться такой вещи, как появление элемента при прокрутке (скроллинге). Не важно, что это будет за элемент, форма для подписки, рекламный баннер или кнопка вверх, в любом случае механизм появления/сокрытия будет одним и тем же. Так как же сделать появление элемента при прокрутке страницы вниз?

Для решения этой задачи мы снова воспользуемся JS библиотекой Jquery. За прокрутку (скроллинг) в Jquery отвечает событие scroll(), а так же методы .scrollTop() .scrollLeft(), благодаря которым мы можем получить или изменить вертикальную или горизонтальную прокрутку элементов. В нашем случае нам понадобится метод .scrollTop(), которым мы воспользуемся для получения значения текущей позиции прокрутки и выполнения определенных действий при достижении определенного уровня.

Для воплощения задуманного воспользуемся следующим кодом:

$(document).ready(function(){
	$(window).scroll(function(){
		if($(window).scrollTop()>120){
			$('#top').fadeIn(900)
		}else{
			$('#top').fadeOut(700)
		}
	});
});

, т.е. мы отслеживаем окно браузера на событие прокрутки (скроллинга) ползунка, и после того, как ползунок преодолеет значение в 120 единиц по высоте, покажем элемент #top, воспользовавшись функцией fadeIn(), во всех остальных случаях данный элемент скрыт функцией fadeOut(). Теперь нам осталось задать для элемента стили, чтобы элемент был сразу невидимым на странице.

#top {display:none;position:fixed;right:1%;bottom:16px;width:48px;height:48px;background:#ff0000;}

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