Sticky Content

Base Foundry stack

Pin content to the top or bottom of your page, or have content automatically stick to the top of the browser as the visitor scrolls down the page.

  • Affix content to the top or bottom of the page
  • Style the background to match your page's content
  • Choose from Fluid or Fixed-Width inner content area
  • Set trigger to be "Always On" or "When Scrolled To"
  • Add a subtle dropshadow to Sticky Content
  • Set custom padding for content
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.


We’ve placed a Sticky Content stack on our page here and set it to stick to the bottom of the browser window as our example. Check out the bright blue box, at the bottom of the page. Go on.

Using Sticky Content


Sticky Position
Choose whether you’d like the Sticky Content container to be placed at the top or bottom of the page.

You get to decide whether you’d like the content to always be stuck to browser or if you’d like for it to be a normal piece of content until the visitor scrolls down far enough that the Sticky Content touches the top of the browser window.

Expand to Full-Width When Stuck
When using the "When Scrolled To..." trigger type you have the option of having the Sticky Content stack stick to the edge of the browser just as it is, or when this feature is enabled it can span the full width of the browser.


Opt to use a preset Foundry color swatch for the background of the Sticky Content container or whether to use your own custom color via the RapidWeaver color picker. If you use a custom color you can also use the color picker’s opacity slider to make it translucent.

Add a nice subtle drop shadow to the Sticky Content container to help set it apart from your site’s other content.

Set the size of your shadow by increasing or decreasing the Blur size.

Shadow Color
Choose your shadow color using a color picker.

Inner Container

You can choose between a fixed-width for the inner portion of the Sticky Content stack or make it fluid. Fluid allows the contents to stretch out to the full-width of the Sticky Content stack, while fixed-width allows you to set your own maximum width for the inner content.

Set the maximum width you desire for your content in the Sticky Content stack when using Fixed-Width as your inner container type.

Adjust the padding within the Sticky Content stack around your inner container. You can adjust it on all sides at once, or do so on each side individually.