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

Ссылка скопирована
JavaScript
1 ответ

Добрый день!

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

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

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

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

вот это

Ответы:

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

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Стас DB Ответ

Для реализации "липкого" блока на 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");
        }
    });
});

$(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.fixed { position: fixed; top: 0; width: 100%; z-index: 1000; }

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Linux Как диагностировать зависание RK3568 U-boot на Starting kernel? 1 ответ