How to have non-sticky toolbar background in SwiftUI [closed]

I’ve taken a liking to a few particular apps that have a color/background behind their toolbar at the top of the view, as if to emphasize the navigation titles/headers, but then you can scroll past it.

I’m targeting iOS 26. This is basically what I have so far, which leaves me a normal colored toolbar, that’s sticky:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ScrollView {
                ForEach(0..<50, id: \.self) { index in
                    Text("\(index)")
                }
                .frame(maxWidth: .infinity)
            }
            .toolbarBackground(.blue, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbar {
                ToolbarItem(placement: .topBarLeading) {
                    Text("Title")
                        .fontWeight(.bold)
                        .font(.title2)
                        .fixedSize()
                }
                .sharedBackgroundVisibility(.hidden)
            }
        }
    }
}

Which yields a semi transparent sticky header color:

I’ve experimented with conditionally setting .toolbarBackground(.visible/.hidden...) to varied success, which also isn’t non-sticky, just changes the opacity.

Anyone know how to do this? Example screenshots below from Slack app, before and after scrolling down. In this case, it looks like their title is also non-sticky however.

I’m open to using UIKit here too.

This is what I’m going for, note that the header is purple only when at the top of the page, but fades out slowly, and it also has a "hard" line at the bottom that recedes as I scroll upwards.

(sorry about bad gif quality – needed to compress to upload)

Source link