I want to implement a sticky header.

In Swift UI What I want to achieve:

  1. Display user information at the top of the screen.
  2. Display tabs below the user information.
  3. Switch tabs by tapping on them or swiping horizontally below the tabs.
  4. Allow scrolling of the entire screen, but once the user information is scrolled out of view, the tabs should stick to the top of the screen, and only the area below the tabs should be scrollable. (If the user scrolls back up, the user information should reappear.)

Problem:

  1. When I scroll down ProfilePost and then swipe to the right on EventCollectionTop, the screen turns completely white and nothing is displayed. (However, scrolling the screen up will bring back the content.)

I have included the code where the issue is occurring below and would appreciate any feedback you may have. Thank you.

struct profile: View {
    
    @State var selection = 0
    @State var postHeight : CGFloat = 500
    @State var collectionHeight : CGFloat = 500

    var body: some View {
        
        ScrollView(showsIndicators: false){
            VStack{
                Text("sample")
                Text("sample")
                Text("sample")
                Text("sample")
                Text("sample")
                Text("sample")
                Text("sample")

                
                LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
                    Section {
                        TabView(selection: $selection) {
                            VStack {
                                ProfilePost(postHeight: $postHeight)
             

                                Spacer()
                            }
                            .tag(0)

                            VStack {

                                EventCollectionTop(collectionHeight: $collectionHeight)
    
                                Spacer()
                            }
                            .tag(1)

                        }
                      
                        .tabViewStyle(.page(indexDisplayMode: .never))
                        .frame(height: TabViewContentHeightFunc(selection: selection, content1: postHeight, content2: collectionHeight))

                    } header: {
                        HStack{
                            Spacer()
                            Tabbar(tabItems: ["post", "event"], selection: $selection, fontSize: .callout)
                                .frame(width: 200)
                            Spacer()
                        }

                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(.white)
                    }
                }
            }
        }
    }
}


func TabViewContentHeightFunc(selection: Int, content1: CGFloat, content2: CGFloat) -> CGFloat{

        switch selection{
        case 0:
            return content1
        case 1:
            return content2
        default:
            return 500
        }
}

struct ProfilePost: View {
    @Binding var postHeight : CGFloat
    let row = [
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        "jjklda",
        
    ]
    var body: some View {
            VStack{
                
                ForEach(row, id: \.self){ item in
                    Text(item)
                        .frame(height: 90)
                }
                Text("\(postHeight)")
      

            }
      
        .background(GeometryReader{ geometry -> Text in
            postHeight = geometry.size.height
            return Text("")
        })
    }
}

struct EventCollectionTop: View {
    @Binding var collectionHeight : CGFloat
    let row = [
    "rikata",
    "rikata",
    
    ]
    var body: some View {
            VStack{
                Text("Hello, World!")
                Text("\(collectionHeight)")
                ForEach(row, id: \.self){ item in
                    Text(item)
                        .frame(height: 50)
                }

            }
        
        .background(GeometryReader{ geometry -> Text in
            collectionHeight = geometry.size.height
            return Text("")
        })    }
}

The guys from objc.io have a free video on implementing sticky headers in SwiftUI: https://talk.objc.io/episodes/S01E333-sticky-headers-for-scroll-views

I want to implement a sticky header.
 
 
Q