This is the final part of the GeometryReader series! Congrats on making it this far. 🎉 You can find Part 4 here.

In this article, you're going to learn how to persist a header or make it stick to the top while the rest of the content scrolls beneath it. "Huh?"

Just look at this example 😃 :

Notice how the header ("UTAH"):

• Expands when the user scrolls down but only to a specific height
• Resizes when scrolling up or down
• Gets smaller when the user scrolls up but only to a specific height

Assets

Concepts

In order to achieve this effect, the header has to be ON TOP of the rest of the content.

(For some reason the Debug View Hierarchy isn't showing the images being clipped by the cornerRadius modifier.)

So this means you will need a ZStack INSIDE the ScrollView. It has to be inside because the header's size will be affected by the scrolling.

OK, time to start building.

Build the Sticky Header

struct StickyHeader: View { 
    var body: some View { 
        ScrollView { 
            ZStack { 
                // Bottom Layer 
                VStack(spacing: 20) { 
                    Tile(imageName: "Arches", tileLabel: "Arches") 
                    Tile(imageName: "Canyonlands", tileLabel: "Canyonlands") 
                    Tile(imageName: "BryceCanyon", tileLabel: "Bryce Canyon") 
                    Tile(imageName: "GoblinValley", tileLabel: "Goblin Valley") 
                    Tile(imageName: "Zion", tileLabel: "Zion") 
                } 
                .padding(.horizontal, 20) 
            } 
        }.edgesIgnoringSafeArea(.vertical) 
    } 
} 

OK, this is a start and gives us our scrollable list of Utah national parks:

3. Add the Header
Now we want to add a second layer on top of this content for the header image:

struct StickyHeader: View {
    var body: some View {
        ScrollView {
            ZStack {
                // Bottom Layer
                VStack(spacing: 20) {
                    Tile(imageName: "Arches", tileLabel: "Arches")
                    Tile(imageName: "Canyonlands", tileLabel: "Canyonlands")
                    Tile(imageName: "BryceCanyon", tileLabel: "Bryce Canyon")
                    Tile(imageName: "GoblinValley", tileLabel: "Goblin Valley")
                    Tile(imageName: "Zion", tileLabel: "Zion")
                }
                .padding(.horizontal, 20)
               
                // Top Layer (Header)
                GeometryReader { gr in
                    VStack {
                        Image("Utah")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(height: 300)
                            .overlay(
                                Text("UTAH")
                                    .font(.system(size: 70, weight: .black))
                                    .foregroundColor(.white)
                                    .opacity(0.8))
                        Spacer() // Push header to top
                    }
                }
            } 
        }.edgesIgnoringSafeArea(.vertical) 
    } 
} 

I created a VStack just so I can add a Spacer to push the Image view up to the top.
The image's height is hard-coded to 300 right now, but soon you will be changing this.

Here is how it looks so far:

The header is completely covering our tiles. Since the header is hard-coded to 300, you can just push the bottom layer down by 300.

4. Push down the bottom later.
 

// Bottom Layer
VStack(spacing: 20) {
    Tile(imageName: "Arches", tileLabel: "Arches")
    Tile(imageName: "Canyonlands", tileLabel: "Canyonlands")
    Tile(imageName: "BryceCanyon", tileLabel: "Bryce Canyon")
    Tile(imageName: "GoblinValley", tileLabel: "Goblin Valley")
    Tile(imageName: "Zion", tileLabel: "Zion")
}
.padding(.horizontal, 20)
.padding(.top, 300) 

Pretty simple. I used the padding modifier but there are other ways to do this (like using offset for one). This is looking better:

The header will move up when scrolled. You don't want this!

What we want to do is constantly offset that header by the same amount it's being scrolled up.

If it scrolls up -100, then just push it back down by +100.

The opposite will also be true. If it is scrolled down +100, push it back up by -100.

5. Offset the Header
Here is the code to offset the header.

// Top Layer (Header)
GeometryReader { gr in
    VStack {
        Image("Utah")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(height: 300)
            .overlay(
                Text("UTAH")
                    .font(.system(size: 70, weight: .black))
                    .foregroundColor(.white)
                    .opacity(0.8))
            // Offset just on the Y axis
            .offset(y: gr.frame(in: .global).origin.y < 0 // Is it going up?
                ? abs(gr.frame(in: .global).origin.y) // Push it down!
                : -gr.frame(in: .global).origin.y) // Push it up!
        Spacer() // Push header to top
    }
}

Note: The abs function used here is the absolute number function that always returns a positive number.

Our header now sticks to the top!

Hooray!

Now there's nothing really special about this layout because you might be thinking to yourself, "Can't you do this with a VStack and just use a ScrollView as your second view?"

Yeah, you totally could have and probably should if that's all you needed.

But we're going to take this further and resize that header depending on the scrolling.

6. Create a Function to Adjust the Frame Height
Let's think about the logic here for a second. There are 3 variables you want to work with:

1. The maximum height of the header (which you currently have set to 300).
2. The minimum height of the header that it can shrink to.
3. The Y origin offset of the geometry reader that changes as the scrolling takes place.

func calculateHeight(minHeight: CGFloat, maxHeight: CGFloat, yOffset: CGFloat) -> CGFloat {
    // If scrolling up, yOffset will be a negative number
    if maxHeight + yOffset < minHeight {
        // SCROLLING UP
        // Never go smaller than our minimum height
        return minHeight
    }
    
    // SCROLLING DOWN
    return maxHeight + yOffset
}

// Top Layer (Header)
GeometryReader { gr in
    VStack {
        Image("Utah")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(height:
                self.calculateHeight(minHeight: 120,
                                     maxHeight: 300,
                                     yOffset: gr.frame(in: .global).origin.y))
            .overlay(
                Text("UTAH")
                    .font(.system(size: 70, weight: .black))
                    .foregroundColor(.white)
                    .opacity(0.8))
            // Offset just on the Y axis
            .offset(y: gr.frame(in: .global).origin.y < 0 // Is it going up?
                ? abs(gr.frame(in: .global).origin.y) // Push it down!
                : -gr.frame(in: .global).origin.y) // Push it up!
        
        Spacer() // Push header to top
    }
}

Test this and you should see the header expand and shrink when scrolling:

Exciting!

Why does the image change size when the frame size changes?
The image's resizable modifier allows the image to change size and fit inside the frame. The fill aspect ratio modifier makes sure the image will adjust to fill in the entire frame.

That's why it's important to use an image that is wide enough to fill the space when the header shrinks.

(Interesting note: I'm not 100% certain that this is Utah. I think it's Monument Valley but it could also be Northern Arizona. 🤔)

BONUS EFFECTS!

// Show a shadow when minHeight is reached 
.shadow(radius: self.calculateHeight(minHeight: 120, 
                                     maxHeight: 300, 
                                     yOffset: gr.frame(in: .global).origin.y) < 140 ? 8 : 0) 

I used less than 140 instead of our minimum height of 120 so the shadow appears a little before the first tile starts to go under the header (the Image("Utah") view).

Oh, if you use this shadow, put the modifier BEFORE the overlay modifier or else it will add a shadow to your text too. 😉 I learned my lesson. 😄

Pulling Away Effect
I was inspired by Meng To on this one. The idea is that when you pull the tiles down past the header's max height, the tiles start to pull away further and further from the header while the header is still expanding but at a slower rate.

To achieve this effect, you will need to update the calculateHeight function:
 

func calculateHeight(minHeight: CGFloat, maxHeight: CGFloat, yOffset: CGFloat) -> CGFloat {
    // If scrolling up, yOffset will be a negative number
    if maxHeight + yOffset < minHeight {
        // SCROLLING UP
        // Never go smaller than our minimum height
        return minHeight
    }
    else if maxHeight + yOffset > maxHeight {
        // SCROLLING DOWN PAST MAX HEIGHT
        return maxHeight + (yOffset * 0.5) // Lessen the offset
    }
    
    // Return an offset that is between the min and max heights 
    return maxHeight + yOffset 
} 

All you are really doing is lowering the Y offset value so it's no longer expanding at the same rate as the tiles when scrolling down:

Summary

Free SwiftUI Picture Book

Screenshots for every code example? Yes! Get your FREE SwiftUI picture book here.