Why Your Pinned Block Cards Aren't Working Right and How To Fix Them

Contrary to the issue(s) at hand, the title is pretty self-explanatory.

Today we’re going to do a mini deep-dive into how the Pinned Block feature from Squarespace 7.1 actually works.

Not only to understand how the blocks move inside the page – from a more tangible standpoint – but to fully get WHY we’re having the stacking issues that are showing up on our projects.

We can’t beat the code’s logic, but we can use it to our advantage to make things work the way we need to.

So, why don’t we go ahead and get started?

Video timestamps

00:00 - Three common issues with pinned blocks

So there are three common issues that come up when we're working with pinned blocks in Squarespace 7.1, especially when you have a layout where you have the title at the top and a couple of cards below, and everything is pinned so that it just stays stuck on the screen as you scroll.

So the first issue that usually comes up has to do with the way that the cards stack at the bottom when you reach the end of the section. Even when you have perfectly calculated where they're supposed to sit in that specific area, they end up sort of being all completely, like, bunched up, and then some of them end up poking through at the top, and you can't really find a way to make them sit right now.

The second issue that comes up has to do with the title. Whether your cards are behaving correctly or not at the bottom, once they start leaving the screen, they end up covering the title or going behind it, depending on how you have things set up. But in any case, the title is not leaving alongside the cards, even though you also have it set as a pinned block.

And then the third issue has to do with the cards not leaving the screen in their staggered position. So even if when you're scrolling down the page, you see how each card is sitting exactly where you want it, having that little bit of a gap in between each card, once it's time for all of them to leave the screen, they start overlapping instead, and you don't get that staggered look.

So if you run into any of these issues today, we're going to look at how you can solve them without any code.

01:24 - How pinned blocks actually work

But before we jump into the actual fixes, I wanna do a mini deep dive on how the pinned blocks actually work, because I feel that understanding how this feature behaves is going to be the best way to understand why the problems are coming up and also how the fixes are going to work to solve those problems, so that you can adjust them for your specific project.

Now, to be able to explain how this effect works, I'm not going to be looking through code. I'm gonna be doing something a little bit different.

So I got the idea from a recent video that I saw from SquareKicker, where Nick was explaining how their scroll on reveal effect works for different sections. He was using play cards to show how the effect works when you have it enabled, and I thought that was a great way to be able to explain how this kind of thing works to make it a little bit more tangible.

So that's what I'm gonna do today too. I'm gonna use a couple of cards to show you how the pinned block feature works and to also represent why we're having the issues that we're having.

So let's go ahead and get started.

02:24 - Position sticky and the three stages

Now, the key thing that you need to know here is that pinned blocks work with position sticky.

So whenever we enable a pinned block, that means that we're giving it position sticky with a specific offset, which could be the top or the bottom offset, or Squarespace also gives us the center offset. But technically, that's just a calculation that they're doing based on the top or the bottom offset.

In any case, for this explanation, I'm only going to be talking about the top offset, which is the one that's most straightforward to work with.

So the combination of having position sticky and the top offset is going to make that element go through three different stages.

First, we have the initial position of the element, which is simply going to be where you have it placed inside that specific area.

The second stage of the behavior has to do with when the element stays stuck on the screen, and that is determined by the top offset that we have previously given it.

So that offset is simply the difference between the top of the browser window and how many pixels down you want that thing to just stay in place.

And then the last stage of the behavior is when the element leaves the screen, and that has to do with when the bottom of the section touches the bottom of the element. That is when the element stops being stuck, and then everything just scrolls away.

With the bottom offset, things are pretty much the same, but they look different in the beginning. So again, we're not gonna be covering that one here.

But in general terms, that is how positioning sticky works.

03:49 - How the cards create the staggered look

Now, let's go ahead and take a look at what that looks like with the cards.

So we have our cards. I'm just gonna hold three right now, and then we have them all just scrolling normally.

But then at some point, we're going to hit the threshold, the top offset that we've given the first card. So the card is going to stay in place, and then everything else is just going to start scrolling up until it reaches that specific threshold, because this card is also set to sticky or pinned.

So we're going to have it there, sit in place in front of this one based on the z-index that you have. But we have this card here stuck to that specific top offset that we gave it before.

And then same thing is gonna happen with the third card. So that one is simply going to get stuck on the screen where we have that top offset, right?

So that's how we create that staggered look.

So up to this point, it's pretty straightforward to understand or to see what's going on on the screen.

04:46 - Why pinned cards stack funny at the bottom

The problem comes with the third stage of the behavior.

So what happens here is that I'm gonna hold them like this, because I think it's gonna be easier to see.

So what happens is that then we have the bottom of the section that starts reaching, or just continues to scroll through, because again, we have the rest of the page that is moving. These three things are stuck in place, but we still have the rest of the elements moving.

So once we have the bottom of the section reaching the bottom of the cards, that's when the cards are going to start getting unstuck again.

So in this case, because the third card, this one here, is the first one that's closer to the bottom of the section, that is the first card that's going to move.

But then at this point, what's gonna happen is that now I have both the second and the third card aligned in the same place. And so once this continues to move up, then both cards are going to move, and now everything is completely aligned here at the bottom.

And so that means that when this continues to move upwards, then we have everything leaving together on the screen.

So based on this, you may already have a little bit of an idea of why you may be experiencing the other issues, but we're going to look at them anyway.

06:07 - The problem with cards of different heights

So what happens, or what usually happens, when we have pinned cards on the screen, they're not always the same height, and that's where the problem starts happening.

Because if right now my cards weren't these three that I have here, and now I have these three cards instead with different heights, then we're going to get a different result.

So when you already have the cards staggered this way, you can't really tell that they have different heights. The real problem comes in when you have the bottom of the section reaching to the bottom of each of the cards.

Because here, if I start moving this up, then you can see how the card in front is simply going to move to the top, right? So it's pretty much going to cover the one that is behind it.

But then if I continue moving this up, what's gonna happen is that now the card in the back is going to start poking through the back of the whole pack.

And that is because the height of that card is taller than the ones in the middle.

So my hand already reached this front card, and it reached the third card, but it hasn't touched the middle one, because the middle one is really short. But this one already has the height required for the bottom of the section to touch it.

So this is why we're seeing those really weird, wonky stacking issues when we're working with cards that have different heights.

It's not that the pinned blocks don't want to cooperate. It's that that is the way that the pinned blocks work.

So the solution here is super simple. Simply stretch out your cards so that they all match in height.

That way, once the bottom of the section starts touching them, they're going to start leaving the screen in the order that they should.

07:50 - Why the title gets covered even when its pinned

Now let's take a look at what happens with the title portion, because even when we're working with a different kind of content, the underlying problem is exactly the same.

Alright, so here I have the cards in their staggered layout, and then we have the title here at the top.

Now, this pinned block here is already at its offset point, so this one already reached the threshold. This one is stuck on the screen. The cards already stacked as well, because they reached their specific offset as well.

So now what happens is that the bottom of the section is going to start touching the bottom here of the cards.

Now I'm simply going to stack them all together, because you already know how that works.

So what's gonna happen now is that the bottom of the section is going to continue pushing them upwards, covering the title until the bottom of the title, which is down here, I don't know if we can see it, yeah, there we go, the bottom of the title reaches that bottom of the section as well, and then everything leaves together.

So once more, we have the same issue. The problem is the difference in height.

So here we have the cards that are matching in height, but we have the title that is shorter. Even though that's a different element, that doesn't matter because all of them are sitting inside the same grid container.

So it's completely irrelevant what type of content you have inside it. The important part is the height of those elements.

So if you don't want this title to be covered by the cards, then what is the logical solution here?

Well, that is to add some extra height to the title so that it matches the height of the cards.

And so therefore, once this moves all the way up here, and then the bottom continues moving onwards, it's going to touch the bottom of everything at the same time, and the title is going to stay put all the way up here while the cards just stay stuck up to this level.

But not because there's a new threshold. It's because now we have some extra height applied to the title so that it compensates for the space that the cards are going to sit in.

So again, what you need to do here is to stretch out the container where you're holding the title so that you give it that extra space that is required for the cards to cover without covering the actual text portion.

10:05 - Keeping the staggered layout on scroll for pinned card blocks

Alright, so now let's go ahead and look at that third and final scenario: how you can have your cards leave in that stacked layout without having them overlap.

Now, we already saw that the way that we can have all of the cards overlap without having any of them poke through in weird ways is to have them all match in height.

But then, how do you make them leave in that stacked layout where you have a little bit of each card peeking through the previous one?

Well, let's go ahead and take a look at this from the side to see what we need to do.

So basically here, and already knowing that the way that the cards leave has to do with when the bottom hits the bottom of each element, that would mean that each of these cards would need to have an extra bit of height, just like we saw with the title.

We would need to have a little bit of extra height to compensate for that space needed so that they stay put where they are once they start leaving the screen.

The problem with this approach is that depending on the content that you're stretching out, that may not give you the best visual result.

Because if we have cards like we have on the screen where there is a background color applied, that means that the background color of this card here at the bottom is going to be way taller than the one of the other cards.

11:26 - Using the transform offset

Let me show you what the alternative is.

Imagine that we have the ability to have the card and its content as two separate things.

So imagine that I was able to move the content around inside that block without actually moving the block or the card itself.

That is something that we can do with the transform property, and it's something that Squarespace is now allowing us to do through the finishing layer tool.

If we use the transform offset, what we're doing is exactly that. We're moving the content either vertically or horizontally without moving the block itself.

And so if we apply that to pinned blocks, then this is the result that we get.

If we have all of our cards matching in height so that all of them leave at the same time, what we can do with that offset, specifically the y offset, if we use a negative number to pull the content upwards, then what's gonna happen is that we're going to keep the card in place while we're pulling the content a little bit higher up.

So the cards, the blocks are still going to be completely aligned. They're going to match in height. They're going to be exactly at the same place. They're going to end at the same place, so they're going to leave at the same time.

But the content is going to visually sit in a different place so that we can create the staggered look.

12:50 - Setting up the y offset

So in order to set this up, we simply need to do two things.

First, we need to have all of the cards matching in height and stopping at the same sticking point. So we need to give them all the same offset level, because now the offset is simply going to be applied to the content, not to the blocks.

And then the second thing we need to do is just a little bit of math.

The offset that you want to have in between each of the cards is simply going to be multiplied by number of cards that you have left over.

So assuming that I want to keep the 10 pixel offset that I have previously set up, I'm going to look at the first card and I'm going to give it a y offset of -30 because I have three cards left at the bottom.

Then for the second card, I only have two cards at the bottom, so I'm going to set it to -20.

And then for the third card is going to be -10, and then of course, for last card is simply going to be zero.

Now, of course, because we're pulling the content higher up, that means that we may need to move the blocks one row or two further down.

But apart from that, you're not really going to see a difference between the first layout that we had and this second one, at least not initially, because once we start scrolling, you're going to see how everything is just going to stay in place the same way that we had before.

But once the cards start leaving, that's when you're going to see the big difference.

Because thanks to that y offset that we applied to the content, we're going to have the bottom of the section touch the bottom of the cards, but the difference in the content offset that we gave each card is going to maintain that staggered look while everything is scrolling away from the screen.

Alright, and that's everything that I have for you today.

I really hope that you found this helpful and that you're able to implement it on your current client project!

Until next time,

B.