why navigationbar is overlapping the view which is below of it when dragging?

Question

i have navigationbar with large title and there is a custom button next to this navigationbar and tableview next to this custombutton. but when i try to pull down navigation bar it overlaps on custombutton.i need custombutton should move along with navigationbar when i pull down. can anyone assist on this?

i need custombutton should move along with navigationbar when i pull down. can anyone assist on this?

Answer 1

If you want toolBar contents all the way down when scrolling, you have to customize it. By default, it always sticks on top of navigationBar, just view's contents go with the scroll behavior. This way, these icons visually hide under navigationBar within ZStack.

@Namespace private var scrollOffSet
@State private var isChangeToInlineMode = false

var body: some View {
    NavigationStack {
        ZStack {
            ScrollView {
                VStack {
                    Spacer()
                        .frame(height: 60) // <- fixed height to align center on `inline` mode.
                    
                    HStack {
                        Image(systemName: "person.crop.circle")
                            .padding(.leading)
                        
                        Spacer()
                        
                        HStack {
                            Image(systemName: "ellipsis.circle")
                            Spacer()
                                .frame(width: 20)
                            Image(systemName: "magnifyingglass")
                        }
                        .padding(.trailing)
                    }
                    .background {
                        GeometryReader {
                            let offSet = -$0.frame(in: .named(scrollOffSet)).origin.y
                            Color.clear.preference(key: ViewOffsetKey.self, value: offSet)
                        }
                    }
                }
            }
            .coordinateSpace(name: scrollOffSet)
            .onPreferenceChange(ViewOffsetKey.self) {
                //Scroll up to 30 points to trigger
                if isChangeToInlineMode != ($0 < 30) {
                    isChangeToInlineMode.toggle()
                }
            }
        }
        .toolbar {
            if !isChangeToInlineMode {
                //Toolbar default configuration here
            }
        }
        .edgesIgnoringSafeArea(.top)
        .navigationTitle("Jobs")
    }
}

struct ViewOffsetKey: PreferenceKey {
    typealias Value = CGFloat
    static var defaultValue = CGFloat.zero
    static func reduce(value: inout Value, nextValue: () -> Value) {
        value += nextValue()
    }
}

Updated: Using customized PreferenceKey and Geometry reader to read current scrollView offset for toggling mode.

(Reference: Asperi answer)