Pinned sections on top of the view in LazyHGrid

Question

I have searched a lot of this issue, How to achieve pinning the section on top of the view while we have horizontal scrolling in LazyHGrid similar to Native Emoji keyboard, we might have a workaround?

Updated

ScrollView(.horizontal) {
    LazyHGrid(rows: rows, spacing: 6, pinnedViews: [.sectionHeaders]) {
                
        ForEach(EmojiCategory.all, id: \.id) { category in
            Section(header:
                VStack {
                    Text(category.title)
                        .font(.caption)
                        .bold()
                        .textCase(.uppercase)
                        .opacity(0.4)
                    }
                    .frame(maxHeight: .infinity)
                    .background(.clear)
                                  
            ) {
                ForEach(category.emojis, id: \.id) { emoji in
                    Text(emoji.char)
                        .font(.title)
                    }
                }
              }
                
            }.frame(height: 180)
        }
    }
}

Result

Expected Result

Answer 1

Its working fine you are just missing the background, so it won't looks like the items are passing through

Section(header:
    VStack {
        Text("Test")
        .font(.caption)
        .bold()
        .textCase(.uppercase)
        .opacity(0.4)
    }
    .frame(maxHeight: .infinity)
    .background(.white)
)
{}