Есть много статей, но правильное для себя решение, которое нормально работает, не нашел.
Задача:
Есть фильтр товаров (который сбоку в листинге(категории)), хочу его прилепить, что бы при скроле товаров, он оставался видимый.
Как именно нужно:
Фильтр на всех страницах разной высоты, чаще больше видимой области экрана. Нужно, что бы при скроле вниз фильтр опускался тоже и фиксировался только когда проскролится до конца (т.е. если простыня товаров будет длинная и пользователь крутит вниз дальше, он видит только нижнюю часть фильтра), но как только будет скрол вверх, фильтр тоже скролится вверх и как дойдет до верха - фиксируется.
Корректный пример:
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шт это займет вечность), не все вообще поймут, что нужно доскролить и тогда он покажется).
Вопрос:
Как сделать так как мне нужно и что бы не тормозило?) Желательно какое то готовое решение с примером.
