How to make a sticky sidebar?

Good afternoon.

There is a orange block with drop-down lists. So the height was not determined.
If we strollin down the block fixed at the level of the red line.
5e414bb677f8e453466395.png

If we scrollin down and orange block (as disclosed) exceeds the height between the red and green line, the orange block sticks to the green line
5e414d271f22b813944320.png

If we scrollin up and orange block (as disclosed) exceeds the height between the red and green line, the orange block sticks to the red line
5e414d927b3c1806164527.png

it is necessary that the unit is smoothly moved in parallel scroll

I hope, clearly explained the problem, how is this implemented?
Thanks in advance
April 7th 20 at 10:59
3 answers
April 7th 20 at 11:01
Solution
here

Good afternoon, thank you very much. Maybe I forgot to say that if the unit is large, when scrole we should not just pin, but how would scroll with the page. the smoothness should be. I already solved this problem this way — for every scroll I translate moved up and down but so that this unit did not leave behind these lines. Thank you say, for "e.wheelDelta". Since every scroll I compared with the previous one and thus it was caught how many pixels and in what direction scrolled. Thank you very much!!! I know how to get wheel delta - gladyce commented on April 7th 20 at 11:04
April 7th 20 at 11:03
It will be enough css properties 'position: sticky'

https://developer.mozilla.org/ru/docs/Web/CSS/position
https://caniuse.com/#search=position%3A%20sticky - if IE is not needed then of course Yes. - Era.Ritchie commented on April 7th 20 at 11:06
@Era.Ritchie, There is no ie problems... - demario.Johnston91 commented on April 7th 20 at 11:09
April 7th 20 at 11:05
hc-sticky or if there is time and desire - write the script, which we can event scroll to measure the distance to the top of the visible area - on the basis of the numbers already to do the calculation. The task is not very complex, but you will need debajit and consider resize, different types of devices to test - if there are any time - use any ready-made solution.

Find more questions by tags CSSHTML