How to make a block sticky when scrolling, like in VK?

Question

css

I want to implement the behavior of the "sticky" block in the same way as it is implemented in VK groups (or, say, in any group, for example " html css js " ), namely:

1. When we start scrolling down long content, the sidebar scrolls together with a long block until it reaches its lowest point. And stops.
2. When we start scrolling up the long content, the sidebar scrolls along with the long block until it reaches its top point. And stops.

I want to implement this in one of my projects :

1. For the sidebar with #shop-widgets I set the following styles:

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

2. Now the sidebar has become "sticky", however, in order to see its bottom data (content at the bottom of this sidebar) - you need to scroll the entire page with long content far down.

I do not think this is the right decision, but I want to realize this moment.
Preferably with standard css properties (if possible)

Answer 1

Preferably with standard css properties (if possible)

Only with CSS this will not work, in any case you will need js
Here I did it using sticky-sidebar jquery plugin

Answer 2

so it is empty, from what it is or not, nothing changes.
(You can of course build nginx without http support at all)