Артём Мáлков

Как выполнить функцию при скролле страницы или блока на jQuery?

5 окт4 комм

Представим, что на вашем сайте есть некий элемент, который нужно изменить сразу, как только пользователь прокрутил страницу.

Реализовать это можно на jQuery, а именно – с помощью обработчика «scroll»:

$(window).scroll(function() {

	// Действие, если выполнен скролл

});

Здесь «window» означает, что действие нужно выполнить, если произведена прокрутка самой страницы.

Если эту часть вы замените на нужный вам идентификатор, например, «'.block'», то функция будет выполняться уже в случае, когда прокручен контент указанного блока.

Помимо этого можно добавить проверку, и если страница прокручена немного вниз, то сделать одно действие, а если страница находится на самом верху – другое действие:

$(window).scroll(function() {

	var target = $(this).scrollTop();

	if(target == 0) {

		// Действие, если страница в самом верху

	} else {

		// Действие, если страница прокручена вниз

	}

});

Соответственно «window», если это необходимо, вы меняете на нужный вам идентификатор.

Рекомендуем к просмотру
Как определить, на сколько процентов прокручена страница на jQuery/JavaScript?
Посты
Как добавить несколько обработчиков событий addEventListener() к одному элементу в JavaScript?
Статьи и советы
Как отследить направление прокрутки страницы на сайте на jQuery?
Статьи и советы
4
комментария
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 2
    10
      •  Проверенный
    10 июн в 13:33

    Как прикрутить к условию прокрутки вверх, чтобы оно срабатывало только в том случаем, если юзер прокрутил страницу не меньше чем на 200px? А вниз оставить без изменений.

    Относительно текущего положения экрана. Например юзер дошел до середины страницы, или до конца, не важно, где бы он ни был, а потом начал листать вверх, и надо чтобы функция запускалась как только он пролистает 200px.

    Сейчас у меня моментально срабатывают условия при прокрутке вверх и вниз.

    Блок который скрывается и показывается имеет position: fixed;, т.е. он всегда на экране.

    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
    $(".activereadsettings").removeClass("displaynone");
    } else {
    $(".activereadsettings").addClass("displaynone");
    }
    prevScrollpos = currentScrollPos;
    }
      • 0
      1067
        •  Команда Pandoge
      изменено 12 июн в 13:36

      Bashmak, здравствуйте!

      Попробуйте так:

      var scroll_position = 0;
      var scroll_top = 0;
      
      $(window).on("mousewheel DOMMouseScroll", function(e) {
      
      	var target = $(this).scrollTop();
      
      	if(parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail) >= 0) {
      
      		if((scroll_position - target) > 200) {
      
      			$(".activereadsettings").removeClass("displaynone");
      
      			scroll_position = 0;
      
      		}
      
      	} else {
      
      		$(".activereadsettings").addClass("displaynone");
      
      		scroll_position = target;
      
      	}
      
      });
    • 0
    1
      •  Пользователь
    25 апр в 05:36

    Здравствуйте ! А как синхронизировать скроллы зразу двух блоков ? К примеру на этой https://codepen.io/topicstarter/pen/ROqgad вёрстке - как можно сделать что бы при прокрутке левого блока скролился и правый ?

      • 1
      1067
        •  Команда Pandoge
      25 апр в 12:43

      Maxim Lensky, Здравствуйте!

      Не совсем понял вопрос. В предложенной верстке уже прокручиваются оба блока одновременно.

Подняться наверх
«Pandoge» - помощник вебмастера