Dock an element with ScrollView when it reaches the top of screen - swift

Question

Take the following image as an example. The entire screen underneath the header including image crown, person image and text life is a ScrollView. What I want is that what the Text "Tasks" reaches the region of "Life", it stops going up, which makes it look like docking at the top. Also, I hope "Tasks" could be a button, so we could always skip back to the task list as soon as we tap it.
Thus, what element should I use in SwiftUI to achieve so?

Answer 1

If you have a LazyVStack inside the scroll view you can implement a section with a header for the crown, text and person icon ( those 3 will be in an HStack) and after that the lazy stacks have a parameter called pinnedViews where you will put .sectionHeaders. That should pin the HStack to the top when you scroll up.
var body: some View {
ZStack {
Color.red
ScrollView {
LazyVStack(pinnedViews: .sectionHeaders) {
Section(header:
HStack {
Button(action: { }) {
Text("Crown")
.foregroundColor(contentSelection == .one ? .black : .gray)
}
Spacer()
Button(action: { }) {
Text("Life")
.foregroundColor(contentSelection == .two ? .black : .gray)
}
Spacer()
Button(action: { }) {
Text("Person")
}
}
.padding()
.background(Color.green)
) {
VStack {
ForEach((1...50), id: \.self) { item in
ZStack {
Text("This is item number \(item)")
}
.frame(height: 80)
}
}
}
}
}
}
}