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

Question

[Эдуард Валеев]

Хочу реализовать поведение "липкого" блока так же, как это реализовано в группах вк (или, скажем, в любой группе, например "html css js" ), а именно:

1. Когда мы начинаем скроллить длинный контент вниз - боковой сайдбар скроллится вместе с длинным блоком, пока не достигнет своей нижней точки. И останавливается.
2. Когда мы начинаем скроллить длинный контент вверх - боковой сайдбар скроллится вместе с длинным блоком, пока не достигнет своей верхней точки. И останавливается.

Я хочу подобное реализовать в одном из своих проектов:

1. Для сайдбара с #shop-widgets задал следующие стили:

#shop-widgets {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

2. Теперь сайдбар стал "липким", однако же для того, чтобы увидеть его нижние данные (контент в нижней части этого сайдбара) - необходимо всю страницу с длинным контентом проскроллить далеко вниз.

Не считаю это правильным решением, однако хочется реализовать этот момент.
Желательно стандартными свойствами css (если такое возможно)

Answer 1

[Danny Arty]

Желательно стандартными свойствами css (если такое возможно)

Только с CSS такое не получится, в любом случае понадобится js
Вот сделал с использованием jquery-плагина sticky-sidebar

Comments

[Эдуард Валеев]

Эх, всё бы хорошо, но проект на vuejs - мы jquery не применяем от слова вообще.
Ну да ладно, попробем порыться, может быть получится выцыганить код, который за это отвечает и применить в проекте.

Спасибо за наводку!

[Danny Arty]

Эдуард Валеев, дык уточнили бы что на vue делаете. Есть куча готовый решений в интернете, например вот