How do I make a section sticky on Squarespace?

CSS position: sticky lets you pin a section or element in place as the user scrolls past it. On Squarespace 7.1, target the specific section by its data-section-id or add a code block with a wrapper class.

The key requirement is that the sticky element's parent must have enough height for the sticky behavior to activate. Set a top value to control where it locks into position.

[data-section-id="YOUR_SECTION_ID"] {
  position: sticky;
  top: 80px;
  z-index: 100;
  background: #fff;
}
/* For sticky sidebar in a grid layout */
.sqs-layout .sqs-col-6:last-child .sqs-block {
  position: sticky;
  top: 100px;
}