TemperStack
Find Tools
Intermediate8 min readUpdated Mar 18, 2026

How to create block pinning effects on Squarespace

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.

Prerequisites

  1. Active Squarespace subscription with Business plan or higher
  2. Basic understanding of CSS custom code
  3. Access to Code Injection or Developer Mode
  4. Familiarity with Squarespace block editor
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
Tip
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.
Tip
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.
Tip
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>
Tip
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>
Tip
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.
Tip
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>
Tip
Always respect user preferences for reduced motion to maintain accessibility standards.

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; }

Related Guides

More Squarespace Tutorials

How to generate API key for integrations

How to connect Square payments

How to add custom code injection

How to set up product reviews

Other Tool Tutorials

F

Framer Tutorials

G

Ghost Tutorials

S

Shipixen Tutorials

Ready to get started with Squarespace?

Put this tutorial into practice. Visit Squarespace and follow the steps above.

Visit Squarespace →