Hi guys! I'm experiencing a scrolling issue with s...

# compose

[Yassine Abou]

Hi guys!
I'm experiencing a scrolling issue with sticky headers in Jetpack Compose. When scrolling, list items overlap the sticky header instead of remaining below it. how could I fix this issue:

@Composable
fun RecentCollectionsContent() {
    Surface {
        ThreadList(threadCollectionList = generatedFakeThreads)
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ThreadList(threadCollectionList: List<ThreadCollection>) {
    val grouped = threadCollectionList.groupBy { it.headline }

    LazyColumn(
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        grouped.forEach { (initial, collections) ->
            stickyHeader(key = initial) {
                SectionHeader(initial)
            }

            items( collections.flatMap { it.threads }) { thread ->
                ThreadCard(thread)
            }
        }
    }
}@Composable                                                                                                                  
fun SectionHeader(
    title: String
) {
    Text(
        text = title,
        fontWeight = FontWeight.W500,
        modifier = Modifier.padding(top = 24.dp)
    )
}


@Composable
fun ThreadCard(threadItem: ThreadItem) {
    Card(
        modifier = Modifier
            .fillMaxWidth(),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            ThreadContent(title = threadItem.title, content = threadItem.description)
            ThreadActions(aiProvider = threadItem.aiProvider)
        }
    }
}

Screen_recording_20241216_031525.mp4

[Dusan Stefanovic]

Hi, I guess it’s the easiest to add opaque background to your SectionHeader which matches LazyColumn background color

@Composable
fun SectionHeader(
    title: String
) {
    Surface(
        modifier = Modifier.fillMaxWidth()
    ) {
        Text(
            text = title,
            fontWeight = FontWeight.W500,
            modifier = Modifier.padding(top = 24.dp)
        )
    }
}