• Главная
>
• JQuery

Скролл, или как мы чаще всего говорим "прокрутка" это просто движение по странице вверх или вниз. Это как бегунок на правой стороне экрана, который ты двигаешь вверх и вниз используя колесо мыши. С прокруткой можно взаимодействовать из jQuery в различных ситуациях и выполнять нужные Вам действия с элементами сайта. 

Простые примеры использования jquery при скролле страницы

Рассмотрим несколько простых примеров, как можно взаимодействовать с прокруткой из jQuery для того, чтобы отследить позицию скролла. 

Как узнать, что идёт прокрутка страницы

$(window).scroll(function() {
    console.log('Вы прокрутили страницу!');
});

Когда страница прокручивается, функция внутри $(window).scroll(...) будет вызвана, и сообщение 'Вы прокрутили страницу!' будет отображено в консоли.

Как узнать, что скролл в самом верху

$(window).scroll(function() {
    if ($(this).scrollTop() === 0){
        console.log("Скролл в самом верху");
    }
});

Этот код будет выводить сообщение "Скролл в самом верху" каждый раз, когда пользователь прокручивает страницу до самого верха.

Как узнать, что скролл в самом внизу

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() === $(document).height()) {
        console.log("Скролл в самом низу");
    }
});

Этот код также слушает событие прокрутки окна (window), но в этот раз проверяется, достиг ли скролл самого низа страницы.

Как узнать, что скролл где-то в середине страницы

$(window).scroll(function() {
    var windowMid = $(window).scrollTop() + $(window).height() / 2;
    var documentHeight = $(document).height();

    if (windowMid > documentHeight / 2 - 100 && windowMid < documentHeight / 2 + 100){
        console.log("Скролл около середины страницы");
    }
});

Этот код вновь использует событие scroll объекта window, но теперь он определяет, когда прокрутка окна находится около середины страницы.

Как узнать на сколько пикселей была прокручена страница

$(window).scroll(function() {
    var scrollAmount = $(window).scrollTop();
    console.log("Страница прокручена на " + scrollAmount + " пикселей");
});

Примеры выше показывают, как можно отследить позицию скролла в jQuery и уже исходя из этого, можно совершать какие-либо действия. Далее рассмотрим ещё несколько примеров.

Как можно взаимодействовать с элементами сайта при скролле

Несколько примеров для определения различных ситуаций при скролле сайта.

Как узнать, попал ли элемент в видимую зону экрана

$(window).on("scroll", function() {
    var windowBottom = $(this).scrollTop() + $(this).height();
    var elementPosition = $('#wrp').offset().top;

    if (elementPosition <= windowBottom) {
        console.log('Элемент #wrp находится в видимой зоне');
    } 
});

В данном примере можно узнать, попал ли элемент #wrp в видимую зону экрана. В консоли появится сообщение 'Элемент #wrp находится в видимой зоне' как только его верхняя часть появится на экране. 

Как узнать, что элемент полность в зоне видимости

$(window).on("scroll", function() {
    let windowTop = $(window).scrollTop();
    let windowBottom = windowTop + $(window).height();

    let elementTop = $('#wrp').offset().top;
    let elementBottom = elementTop + $('#wrp').height();

    if ((elementTop >= windowTop) && (elementBottom <= windowBottom)) {
        console.log('Элемент #wrp полностью видим на экране');
    }
});

Аналогично вышеприведённому примеру, но тут уже сообщение 'Элемент #wrp полностью видим на экране' появится только тогда, когда элемент станет полностью видим.

Как узнать, что элемент достигает верхней границы окна

$(window).scroll(function() {
   var topElement = $('.your-element').offset().top - $(window).scrollTop();

   if (topElement <= 0) {
      console.log('Элемент достиг верха страницы');
   }
});

Как узнать, что элемент достиг нижней части страницы

Хорошим тоном будет добавление проверки на существование элемента, что бы избавится от лишних выводов в консоли. 

$(document).ready(function() {

  $(window).scroll(function() {
      let element = $('.your_element');  // замените .your_element на селектор вашего элемента
       
      if (element.length) { // Проверим, существует ли элемент
         let elementOffset = element.offset().top + element.outerHeight();
         let windowScroll = $(window).scrollTop() + $(window).height();

         if (windowScroll > elementOffset) {
             console.log('Элемент коснулся нижней части страницы');
         }
      }
  });

});

Как сделать плавающий блок в сайдбаре 

// определение элемента
var floatBlock = $(".container_side");

// сохранение исходной позиции элемента
var originalPos = floatBlock.offset().top;

$(window).scroll(function() {
    if ($(window).scrollTop() >= originalPos) {
        floatBlock.css({"position":"fixed", "top":"30px"});
    } else {
        floatBlock.css("position","static");
    }
});

Этот код можно использовать, чтобы "закрепить" блок на странице, когда пользователь прокручивает достаточно далеко. Также сохраняется исходная позиция блока, и при прокрутке вверх, блог останется на своём изначальном месте.