CSS3 Position
The "sticky" value is a fairly recent additiin to the position property. It allows an element to scroll with the page content and then stick at a predetermined distance from the top without resorting to Javascript.
hemeKit
ThemeKit UI
Stack
The ThemeKit UI Sticky Srack widget uses psoition:sticky on two elemnts - the optional header and the scrolling elemsnts.
Sticky Stack
CSS Sticky Position
On ScrollAn element with "position:sticky" is initially position relative to the rest of the page content.
On page scroll it toggles between relative and fixed. It is positioned relative until a given offset position is met in the viewport. It then "sticks" in place similar to "position:fixed".
Header
The optional header has a heading and is sticky so that it is always in view showing the product category type.
Images
Lay LoadThe images are inserted jn two sizes for computer and small mobile devices with alt text and an optional lazy loading function.
The images can be centered with a max width to reduce the required file size.
Article
ContentThe article has a heading, styled span, text and an optional link.
The links can be globally switched between internal and extermal and can have common link text if required.