S Squarespace

How to create block pinning effects on Squarespace

intermediate 8 min read Updated 2026-03-18
Quick Answer

Create block pinning effects on Squarespace by adding custom CSS code that uses position: sticky or position: fixed properties to specific block elements. This requires identifying block IDs and implementing scroll-based positioning through Code Injection.

Try Squarespace Full Squarespace Review

Prerequisites

  • Active Squarespace subscription with Business plan or higher
  • Basic understanding of CSS custom code
  • Access to Code Injection or Developer Mode
  • Familiarity with Squarespace block editor

Step-by-Step Instructions

1

Enable Developer Tools and Identify Target Block

Right-click on the block you want to pin and select Inspect Element. Look for the block's unique ID in the HTML, which typically starts with block-yui_ followed by a string of numbers and letters. Copy this ID as you'll need it for the CSS code.

Example: block-yui_3_17_2_1_1234567890123_12345
Take a screenshot of the block ID for reference, as these IDs can be long and complex.
2

Access Code Injection Settings

Navigate to your Squarespace admin panel and go to Settings > Advanced > Code Injection. This feature requires a Business plan or higher. If you don't see this option, upgrade your plan first.
3

Create Basic Pinning CSS Code

In the Header Code Injection area, add the following CSS structure:

<style>
#block-yui_YOUR_BLOCK_ID {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
}
</style>


Replace YOUR_BLOCK_ID with the actual block ID you copied in step 1.
Add a background color to prevent content from showing through the pinned block.
4

Configure Pinning Position and Offset

Modify the top value to control where the block sticks. For example:
  • top: 0; - Pins to very top of viewport
  • top: 80px; - Pins 80px from top (useful if you have a sticky header)
  • top: 10vh; - Pins 10% from top of viewport height
Adjust the z-index value if the pinned block appears behind other elements.
Use browser developer tools to test different top values in real-time before finalizing your code.
5

Add Responsive Behavior

Include media queries to control pinning behavior on different screen sizes:

<style>
#block-yui_YOUR_BLOCK_ID {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

@media screen and (max-width: 768px) {
  #block-yui_YOUR_BLOCK_ID {
    position: relative;
    top: auto;
  }
}
</style>
Test pinning effects on mobile devices as they may impact user experience differently.
6

Implement Advanced Scroll-Based Effects

For more complex pinning behavior, add JavaScript for scroll-triggered effects:

<script>
window.addEventListener('scroll', function() {
  var block = document.getElementById('block-yui_YOUR_BLOCK_ID');
  var scrolled = window.pageYOffset;
  
  if (scrolled > 200) {
    block.style.position = 'fixed';
    block.style.top = '0';
  } else {
    block.style.position = 'relative';
  }
});
</script>
Adjust the scroll threshold (200 in this example) based on when you want the pinning to activate.
7

Test and Refine the Pinning Effect

Save your changes and preview your site. Scroll through the page to test the pinning behavior. Check that:
  • The block pins at the correct scroll position
  • Other content flows properly around the pinned block
  • The effect works on different devices and browsers
  • No layout shifts or jumping occurs during scrolling
Make adjustments to the CSS values as needed.
Clear your browser cache and test in incognito mode to ensure the effects appear for all visitors.
8

Optimize Performance and Accessibility

Add smooth transitions and ensure accessibility:

<style>
#block-yui_YOUR_BLOCK_ID {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  #block-yui_YOUR_BLOCK_ID {
    transition: none;
  }
}
</style>
Always respect user preferences for reduced motion to maintain accessibility standards.

Common Issues & Troubleshooting

Block ID changes after editing the page

Squarespace sometimes regenerates block IDs when content is modified. Re-inspect the element to get the new ID and update your CSS code accordingly. Consider using more stable selectors like .sqs-block-[block-type] when possible.

Pinned block appears behind other elements

Increase the z-index value in your CSS. Squarespace headers typically use z-index values around 1000-2000, so try values like z-index: 2001; to ensure your pinned block appears on top.

Layout shifts or content jumping during scroll

Add a placeholder element or set specific dimensions to prevent layout shifts: 

.pinned-block-container::before {
  content: '';
  display: block;
  height: [block-height]px;
  visibility: hidden;
}

Pinning doesn't work on mobile devices

Some mobile browsers have limited support for position: sticky. Use JavaScript fallbacks with position: fixed and scroll event listeners, or disable pinning on mobile using media queries: @media (max-width: 768px) { position: relative !important; }

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Squarespace website before purchasing.
Visit Squarespace View Squarespace Pricing