Какую реализацию «липкого» блока на js или jquery посоветуете?

Добрый день!

Посоветуйте, пожалуйста, скрипт так называемого "липкого" блока (sticky block) на чистом js или на jquery.

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

Дополнительно:

неужели сам ничего не нашёл

вот это

Ответы:

А что css? position:sticky; нынче не работает?

+ Заказать

 

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

 

    • Какую реализацию «липкого» блока на js или jquery посоветуете?Есть ответ
    • 08.04.2024
    Ответить

    Для реализации "липкого" блока на JavaScript или jQuery можно воспользоваться следующим подходом:

    1. Добавить класс к блоку, который должен оставаться "липким" при прокрутке страницы. Например, класс sticky-block.

    2. Создать функцию, которая будет отслеживать прокрутку страницы и фиксировать блок при достижении определенного расстояния от верхнего края окна браузера.

    3. Применить эту функцию к блоку с классом sticky-block.

    Пример реализации на jQuery:

    $(document).ready(function() {
    var stickyBlock = $(".sticky-block");
    var stickyBlockOffset = stickyBlock.offset().top;
 
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
 
        if (scroll >= stickyBlockOffset) {
            stickyBlock.addClass("fixed");
        } else {
            stickyBlock.removeClass("fixed");
        }
    });
});

    Пример CSS для класса fixed:

    .sticky-block.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

    Этот код будет отслеживать прокрутку страницы и фиксировать блок с классом sticky-block при достижении определенного расстояния от верхнего края окна браузера. При этом блок будет оставаться на месте даже при дальнейшей прокрутке страницы.

Оставить комментарий