want to achieve an effect that both An and B have:
A: when the page scrolls up and down, scroll to the specified module, which will remain at the top of the visual area of the page without scrolling with the scroll bar.

B: in the case of the An effect, when the parent element scrolls left and right, the contents of the specified module will also scroll left and right, but the display content will not go beyond the scope of the parent element.

An effect is not difficult. When the sidebar module scrolls to the top of the page, it will set position:fixed, to it. As the scroll bar scrolls, the sidebar module can always remain at the top of the page, while the rest of the content continues to scroll.

found that the sidebar module displays more content than the parent element main after setting position:fixed. And when the B effect scrolls left and right, dynamically setting the distance of the sidebar module right can achieve content scrolling, but the visual content can not be limited by the parent element. It should be that the sidebar module is separated from the document stream and positioned as body.

but you want to realize all of them. Is there any good way to realize it?