I need something like what is described here: Sticky sidebar: stick to bottom when scrolling down, top when scrolling up . Some of the solutions on that page worked. However, in recent modern times, Google's Core Web Vitals are flagging pages that use these solutions with very high CLS (Cumulative Layout Shift) errors - which hurts search rankings for pages. This is because in the old solutions, the sidebar moves around during scrolling based on changing "top" positioning (technically a layout shift). It causes ugly CLS errors in Google's Search Console and they flag the pages as "Poor URLS".
I've been trying to find the modern solution, which was to use either CSS Transformation to move the sidebar, or a combination of CSS "sticky" positioning, etc. I've been trying to build my own, but I'm not as experienced with CSS "Transform" as I am with CSS "top/bottom/left/right".
Requirements: It needs to work like the image below, or the example in old post above. It needs to be in pure JavaScript and CSS, with no external libraries. A real world example of this is on any person's Facebook wall. It seems they are using some kind of solution involving "position:sticky", again, I'm not too familiar with using it. It doesn't have to be just like the Facebook solution, I would prefer the simplest and cleanest way.
