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.

Example

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.

EXAMPLE. This is our example Sticky Content stack, placed on the bottom of the browser.

Using Sticky Content

Position

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

Trigger
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.

Style

Style
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.

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

Blur
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

Type
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.

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

Padding
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.