How can I set margin output as sticky content so I scrolls with the page?

[yonisidi]

Description

I have a summary table (cells counts by groups) that I want to put in the margins. Then the rest of the document are plots that show different histograms with facets that are based on the same groups in the table. instead of repeating the table throughout the document I would want that original table to scroll on the side as a reference.

How can I achieve something like that?

I know there is sticky css, but not sure how to use it in quarto.

[jimjam-slam]

If you want basic usage of sticky content, you can do it with CSS, as you suggest! The basics are:

1. Use position: sticky; to make the content sticky, then
2. Use either top or bottom (or, if the user is scrolling horizontally,left or right) to establish the position in which it'll stick.
3. The element will only stick inside its parent, so if you're putting it in the margin, you'll need to wrap it in a very tall container. Make sure you don't have other margin content near it, or they'll collide.

The bar chart in the documentation for my Quarto extension, Sverto, uses this technique!

If you'd like a more comprehensive toolkit for sticky content, @andrewpbray and I are the developers of Closeread, a Quarto extension focused on scrollytelling.

[jimjam-slam]

Oh yeah: the margin also collapses into the main column on mobile, so be aware of that if you're making extra space for it to stick in!