How to make headerView with overlapping content design in SwiftUI

I need half of Header View to be covered with remaining UI. I am using header view and list according to UI design and given list top padding in (- value) so it goes up on header view now UI looks good but when I scroll list then my header title covers with list content.. how to fix it? I heard Using Zstack is not good approach for UI is it correct? please guide me.. I tried ChatGPT and Clude but it gives un understandable fix so I am asking here.

after scrolling title covers image:

I need like this:

Code:

struct TaskList: View {
 
    @StateObject var coredataViewmodel = CoreDataViewModel()

    var body: some View {
        NavigationStack {
            VStack {
           
                HeaderView(screenTitle: "Task List")
                
                ListView
                    .padding(.top, -150)
                
                .overlay(alignment: .bottomTrailing) {
                addButton
                }
                
            }
            .background(Color.taskBackground)
            .onAppear {
                coredataViewmodel.loadTasks()
            }

        }

    }
}

struct HeaderView: View {
    
    var screenTitle: String = ""
    var isBackButtonNeed: Bool = false
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        VStack {
            HStack {
                if isBackButtonNeed {
                    Button {
                        print("back tapped")
                        dismiss()
                    } label: {
                        Image(systemName: "arrow.backward")
                            .font(.system(size: 24, weight: .bold))
                            .foregroundStyle(.white)
                    }
                }

                Spacer()
            }
            .padding(.horizontal)
            .padding(.vertical)

            .overlay {
                Text(screenTitle)
                    .font(.system(size: 30, weight: .bold))
                    .foregroundStyle(Color.fieldsColour)
            }
            Spacer()
        }
        .navigationBarBackButtonHidden(true)

        .frame(maxWidth: .infinity, maxHeight: 150)
        .background(
            Color.taskTitleColour
                .ignoresSafeArea()
        )
    }
}