I’ve taken a liking to some specific apps which have a coloration/background behind their toolbar on the prime of the view, as if to emphasise the navigation titles/headers, however then you may scroll previous it.
I am focusing on iOS 26. That is what I’ve thus far:
struct ContentView: View {
var physique: some View {
NavigationStack {
ScrollView {
ForEach(0..<50, id: .self) { index in
Textual content("(index)")
}
.body(maxWidth: .infinity)
}
.toolbarBackground(.blue, for: .navigationBar)
.toolbarBackground(.seen, for: .navigationBar)
.toolbar {
ToolbarItem(placement: .topBarLeading) {
Textual content("Title")
.fontWeight(.daring)
.font(.title2)
.fixedSize()
}
.sharedBackgroundVisibility(.hidden)
}
}
}
}
which creates a sticky, regular coloured toolbar with a semi-transparent header coloration:
I’ve experimented with conditionally setting .toolbarBackground(.seen/.hidden...) to different success, which can also be sticky and simply adjustments the opacity.
That is what I am going for:
Be aware that the header is purple solely when on the prime of the web page, however fades out slowly, and it additionally has a "onerous" line on the backside that recedes as I scroll upwards.
Does anybody understand how to do that? Within the above instance, nonetheless, it appears to be like like their title can also be non-sticky.
I am open to utilizing UIKit right here too.



