Question

I run into situation that when user scroll down, a part of the sidebar gets fixed position, however when I catch the position and apply fixed css to the sidebar element, it gets fixed to whole screen, not just the parent (which is sidebar)

how do I setup this correctly?

Answer 1

First Understand Positioning:

Fixed Positioning OR [ position:fixed ]

An element with fixed position is positioned relative to the browser window.

Relative Positioning OR [ position:relative ]

A relative positioned element is positioned relative to its normal position.

Absolute Positioning OR [ position:absolute ]

An absolute position element is positioned relative to the first parent element that has a position other than static.

So in your case your parent div should have position:relative and your child div should have position:absolute instead of position:fixed

Reference Link