Все для создания и продвижения сайтов

Верстка, программирование, SEO

Прокрутка страницы jquery

количество просмотров
Прокрутка страницы jquery

Здесь я подробно напишу, что знаю про скроулинг.

Простая проверка работы скроулинга

$(window).scroll(function() {
			   if ($(window).scrollTop() > 1000)  { 	  				
					alert ('Мы прокрутили страницу на 1000px');
			  }	 
			 });

Отслеживания скроулинга объекта #mydiv

if ($(window).scrollTop() + window.innerHeight < $('#mydiv').offset().top) { 	  				
// Что-то происходит
}

Срабатывание анимации объекта при прокрутке страницы на определённое количество пикселей

$(function () {
      var element = $("#mydiv"), display;//имя элемента
      $(window).scroll(function () {
        display = $(this).scrollTop() == 300;//300 - количество прокрученных пикселей
        display != element.css('opacity') && element.stop().animate({ 'opacity': display }, 500);//любая анимация
      });
    });

Параметры скроулинга:

$(window).width() Ширина браузера
$(window).height()Высота браузера
$(window).scrollTop()прокручено в пикселях
$("body").height();высота страницы
$('#mydiv').offset().top;координаты блока с верху от начала страницы

Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.