Hello QQ. How do you make LazyColumn's `stickyHead...

# compose

[Sher Sanginov]

Hello
QQ. How do you make LazyColumn's stickyHeader to stick under the Material3 Scaffold's transparent topbar?
currently it sticks behind the topbar but i want it to stick under the topbar while scrolling.

Screen Recording 2023-10-27 at 4.19.53 PM.mov

[Sher Sanginov]

my code:

Scaffold(topBar = {
                TopAppBar(title = {
                    // Text("Top bar Transparent")
                    }, navigationIcon = {
                    MyIcon()
                     },
                    backgroundColor = Color.Transparent
                    )
            }) { padding ->
                LazyColumn {
                    for (i in 1..15) {
                        item { Text(text = "Lazy item ${i}") }
                    }
                    stickyHeader {
                        Row(modifier = Modifier.background(Color.Red).fillMaxWidth()) {
                          
                            Text(text = "This is sticky header")
                        }
                    }
                    for (i in 1..100) {
                        item { Text(text = "Lazy item ${i}") }
                    }
                }

[Sher Sanginov]

this is the behavior i want but here the topbar is no longer transparent. It works here as expected because topbar doesnt overlap lazy column content and lazy column content is placed below the top bar

Screen Recording 2023-10-27 at 4.29.37 PM.mov

[Mitchell Syer]

Have you tried passing the scaffold padding to the LazyColumn like this? LazyColumn(contentPadding = padding)

[Sher Sanginov]

yes it just places my lazy column content below topbar if i do that. see recording:

Screen Recording 2023-10-27 at 4.35.56 PM.mov

[francisco]

{ innerPadding ->
        LazyColumn(
            modifier = Modifier.consumeWindowInsets(innerPadding),
            contentPadding = innerPadding,
        )

[francisco]

https://developer.android.com/jetpack/compose/layouts/insets#scaffold

[francisco]

actually that didn’t help either 😅
the only thing that solved it was this:

{ innerPadding ->
        LazyColumn(
            modifier = Modifier.consumeWindowInsets(innerPadding).padding(top = innerPadding.calculateTopPadding()),
        )

[Sher Sanginov]

yes it solves but then we no longer have transparent top bar. its basically setting top padding to lazycolumn and places lazycolumn content below topbar.

maybe i could check if firstVisibleitem is sticky header and if true, give it a top padding of innerPadding.calculateTopPadding()

[Sher Sanginov]

i would like transparent topbar overlap lazy column like this initially and then as user scroll, stickyHeader sticks under the top bar

[Zoltan Demant]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1689071471670159?thread_ts=1689071471.670159&cid=CJLTWPH7S
Unfortunately no flawless solution yet!

[Sher Sanginov]

@Zoltan Demant is there a hacky solution with less flaws?
one approach i tried was to check whether we have scrolled past lazy list item 15 (since it comes right before the stickyHeader). if we did scroll past it, then i set top padding on stickyHeader to topbar's height which will make our stickyheader stick under the topbar.
however, there's jumping down effect by stickyHeader which isnt a great for UX.

[Zoltan Demant]

Ultimately thats the same issue I ran into. The closest thing to a solution I came to was using an offset instead of padding, then rendering a box with the stickyheader background underneath it, without the offset. Its not perfect either though; mainly because the jump still happens suddenly (asked for help here) and due to the offset, scrolling a stickyheader over another produces a weird effect (overlap by offset amount, basically). There was a bug report in the thread I linked as well. If you have any more ideas: 👂🏽

[Sher Sanginov]

ok got it. thank you