Безлимитный хостинг на сверхбыстрых SSD-дисках от 73р в месяц   •   Реклама
6 860 просм
4 комм
Поделиться:

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

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

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

$(window).scroll(function() {

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

});

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

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

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

$(window).scroll(function() {

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

	if(target == 0) {

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

	} else {

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

	}

});

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

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
      841
        •  Администратор
      изменено 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
      841
        •  Администратор
      25 апр в 12:43

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

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

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