Hi there Quick question. when `LazyColumn` has `stickyHeader` and we call `animateScrollToItem` to s...

# compose

[Sher Sanginov]

Hi there
Quick question. when LazyColumn has stickyHeader and we call animateScrollToItem to scroll to given item, the given item doesn't become the first visible item in the screen (See recording).
But without stickyHeader , it works as expected and my item becomes firstVisibleItem
Is this expected or a bug?

incorrect.mov

[Sher Sanginov]

without stickyHeader, works as expected.

Note: i am just using box to overlap button instead of stickyHeader

animateScrollTo.mov

[Sher Sanginov]

My code:

@Composable
    fun ScrollToItem(paddingValues: PaddingValues) {

        val listState = rememberLazyListState()
        val coroutineScope = rememberCoroutineScope()

        val items = (0..20).map { "Item $it" }

        Box(modifier = Modifier.padding(paddingValues)) {

            LazyColumn(modifier = Modifier.fillMaxSize(), state = listState) {

                stickyHeader {
                    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
                        Button(onClick = {
                            coroutineScope.launch {
                                listState.animateScrollToItem(11)
                            }
                        }) {
                            Text("Scroll to item 11")
                        }
                    }
                }


                items(items) {

                    Row(modifier = Modifier.fillMaxWidth().height(100.dp).background(Color.Yellow)) {

                        Text(text = "Lazy Column item ${it}")

                    }
                }

}}

[efemoney]

LazyList works as expected.

stickyHeader is an item just like every other item… the only difference is that its sticky 🙂

[Sher Sanginov]

to achieve above behavior in recording with stickyHeader, do i have to calculate the visible height of item above and set some sort of offset to make sure my desired item goes to the very top?
or is there an easier way to achieve this?

[Sher Sanginov]

basically i want my item 11 be positioned right under the stickyHeader. dont want to see content of item 10

[efemoney]

With the sticky header you have one more item in the lazy list so just offset your position by +1 eg animateScrollToItem(12) instead of 11

[Sher Sanginov]

works. thank you

[Sher Sanginov]

also had to set negative scrollOffset in animateScrollToItem(12, -100) make sure my item is fully visible; otherwise stickyHeader hides top of it