I want to integrate the parallax effect into my code. I have one screen in which I have a top bar, a header, and a lazy column.

I need to scroll the lazy column over the header which is completely working fine. Only the issue is the lazy column that I am scrolling is transparent that's why my header content is visible when I scroll the lazy column over the header.

I want to set a white background to the lazy column so that my header content is not visible.

I tried to set the background with the modifier by wrapping my column with either a Box or a Surface. The result is my lazy column scrolls behind the header and sometimes white space is showing in the place of header.

I am sharing my code. Please check and help me with this.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun ScreenContent(
    state: CirclesState.ContentWithPromoted,
    snackbarHostState: SnackbarHostState,
    onPullToRefresh: () -> Unit,
    onCirclesSearchClick: () -> Unit,
    onCreateCircleClick: () -> Unit,
    onJoinCircleClick: (circle: Circle) -> Unit,
    onCircleClick: (circle: Circle) -> Unit,
    onGetHelpClick: (circleWithEstablishment: Circle) -> Unit,
    onCircleEstablishmentClick: (circleWithEstablishment: Circle) -> Unit,
    onShowAllCirclesClick: (section: CirclesSection) -> Unit,
    onMyBondsClick: () -> Unit,
    onMemberClick: (member: MemberOfCircle) -> Unit,
    onOthersMembersClick: (circle: Circle) -> Unit,
    onToolbarCollapsedPartiallyStateChanged: (isCollapsedPartially: Boolean) -> Unit,
    onErrorShown: () -> Unit,
    modifier: Modifier = Modifier,
) {
    val hazeState = remember { HazeState() }
    val lazyListState = rememberLazyListState()
    val pullToRefreshState = rememberPullToRefreshState()

    val headerHeight = HeaderFeaturedCircleHeight.dp

    val isToolbarCollapsedPartially by remember {
        derivedStateOf {
            lazyListState.firstVisibleItemIndex > 0 ||
                lazyListState.firstVisibleItemScrollOffset > PartialCollapseScrollProgressThreshold
        }
    }

    LaunchedEffect(isToolbarCollapsedPartially) {
        onToolbarCollapsedPartiallyStateChanged(isToolbarCollapsedPartially)
    }

    GeneralErrorHandler(
        snackbarHostState = snackbarHostState,
        error = state.error,
        onErrorShown = onErrorShown,
    )

    PullToRefreshBox(
        state = pullToRefreshState,
        isRefreshing = state.isRefreshing,
        onRefresh = onPullToRefresh,
        content = {
            ScaffoldWithBox(
                modifier = modifier.fillMaxSize(),
                topBar = {
                    CirclesScreenTopBar(
                        isCollapsedPartially = isToolbarCollapsedPartially,
                        isToolbarExpanded = !isToolbarCollapsedPartially,
                        onNavigationIconClick = onCirclesSearchClick,
                        title = "",
                        navigationIconResId = ResourcesR.drawable.ic_seach_new,
                        navigationIconContentDescription = ResourcesR.string.circles_search,
                        actions = { contentColor ->
                            IconButton(
                                onClick = onCreateCircleClick,
                                icon = {
                                    Icon(
                                        modifier = Modifier.padding(4.dp),
                                        tint = contentColor,
                                        painter = painterResource(id = ResourcesR.drawable.ic_add),
                                        contentDescription = stringResource(ResourcesR.string.circles_create_circle),
                                    )
                                },
                            )
                        },
                        alwaysShowTitle = true,
                        hazeState = hazeState,
                    )
                },
                content = {
                    Box(modifier = Modifier.fillMaxSize()) {
                        // LazyColumn that scrolls OVER the header
                        LazyColumn(
                            state = lazyListState,
                            modifier = Modifier
                                .fillMaxSize()
                                .zIndex(2f) // Ensures LazyColumn scrolls over the header
                        ) {
                            item {
                                Spacer(modifier = Modifier.height(headerHeight)) // Push content below the header
                            }
                            item { Spacer(modifier = Modifier.height(24.dp)) }
                            item {
                                Text(
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .padding(horizontal = 16.dp),
                                    text = stringResource(ResourcesR.string.circles_featured_circles),
                                    style = Theme.typography.bodyLargeBold,
                                    color = Theme.colors.textPrimary,
                                )
                            }
                            item { Spacer(modifier = Modifier.height(16.dp)) }

                            circlesScreenContentCommonNew(
                                state = state,
                                onCircleClick = onCircleClick,
                                onCircleEstablishmentClick = onCircleEstablishmentClick,
                                onShowAllCirclesClick = onShowAllCirclesClick,
                                onCreateCircleClick = onCreateCircleClick,
                                onMyBondsClick = onMyBondsClick,
                            )
                        }

                        // Fixed Header (Stays at the top)
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(headerHeight)
                                .align(Alignment.TopCenter)
                                .zIndex(1f) // Header stays below LazyColumn
                        ) {
                            HeaderCircleEstablishment(
                                modifier = Modifier.haze(hazeState),
                                circle = state.promotedCircleEstablishment,
                                onJoinCircleClick = { onJoinCircleClick(state.promotedCircleEstablishment) },
                                onMemberClick = onMemberClick,
                                onOthersMembersClick = onOthersMembersClick,
                                onGetHelpClick = onGetHelpClick,
                            )
                        }
                    }
                },
            )
        },
    )
}