@dmyasnykov

Как сделать прилипание вертикального фильтра (stickly) css/js?

Есть много статей, но правильное для себя решение, которое нормально работает, не нашел.

Задача:
Есть фильтр товаров (который сбоку в листинге(категории)), хочу его прилепить, что бы при скроле товаров, он оставался видимый.

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

Корректный пример:
https://www.apple.com/shop/mac/mac-accessories/dis...
Для наглядности раскройте все плюсы и More, что бы высота фильтра была больше области экрана.

Решения которые нашел, но не подошли:
1. shpargalkablog.ru/2013/09/scroll-block.html номер 8, работает правильно, но очень большой по размеру скрипт, в хроме при скроле сильно прыгает, а в фаерфоксе дико тормозит.

2. Относительно новый метод через css:
#column-left {
display:stickly;
top:15px; 
}

Работает быстро, поддержка браузерами устраивает, НО при сколе вниз он приклеивается к топу (а не скролится вниз как мне надо), и остается как position:fixed, и лишь в конце страницы скролится вниз (т.е. что бы увидеть низ фильтра, нужно проскролить всю страницу до конца(если поставить вывод товаров по 100шт это займет вечность), не все вообще поймут, что нужно доскролить и тогда он покажется).

Вопрос:
Как сделать так как мне нужно и что бы не тормозило?) Желательно какое то готовое решение с примером.
  • Вопрос задан
  • 172 просмотра
Решения вопроса 1
sharnirio
@sharnirio
Front-end developer
то что вам нужно есть в плагине sticky-kit - link
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@AlexeyLem
Ищу Middle/Junior Front-End кодера в офис, СПб
Делал такую штуку, но нативно.

Вешаете обработку на скролинг страницы:

$(window).scroll(function() { /* some code */ });

Берете позиция блока с фильтрами:
var top = $('#filter_wrap').offset().top;

При достижении скрола фильтра меняете position и обратно:

if ($(window).scrollTop() >= top) {
    $('#filter_wrap').css({
        posiotion: "fixed"
    });
} else {
    $('#filter_wrap').css({
        posiotion: "static"
    });
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы