SwiftUI - Change opacity of a view based on position of scrollview

Question

This is more of a "is it possible" question.

I currently have a floating custom navigation bar that sits in its own parent container with a white background and an opacity of 0%. I'd like to change the opacity of that parent container from 0% to 50% after the scrollView has scrolled past the hero image in the scrollview.

var body: some View {
    ZStack {
        ScrollView(.vertical, showsIndicators: false) {
            GeometryReader { geometry in
                ZStack{
                    if geometry.frame(in: .global).minY <= 0 {
                        Image(self.venueImage)
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: geometry.size.width, height: geometry.size.height)
                        .offset(y: geometry.frame(in: .global).minY/9)
                        .clipped()
                    } else {
                        Image(self.venueImage)
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: geometry.size.width, height: geometry.size.height + geometry.frame(in: .global).minY)
                        .clipped()
                        .offset(y: -geometry.frame(in: .global).minY)
                    }
                }
            }.frame(height: 300)
            VStack {
                HStack {
                    Text(self.title)
                        .font(.title)
                        .fontWeight(.bold)
                    Spacer()
                }.padding(.horizontal, 24)
                HStack {
                    Text(self.venueArea)
                        .foregroundColor(Color("bodyText"))
                    Spacer()
                }.padding(.horizontal, 24)

                VStack {
                    ForEach(self.venueProd) { gc in

                        VStack {
                            HStack {
                                    Text(gc.title)
                                        .font(.system(size: 17))
                                        .fontWeight(.semibold)
                                    Spacer()
                            }
                            HStack {
                                Text(gc.productDescription)
                                    .foregroundColor(Color("bodyText"))
                                    .font(.system(size: 15))
                                    .padding(.top, 5)
                                Spacer()
                            }
                            HStack {
                                Text("$\(gc.productPrice, specifier: "%.2f")")
                                Spacer()
                            }.padding(.top, 8)
                            Divider()
                        }.padding(.bottom, 8)

                    }
                    Spacer()
                }.padding(.horizontal, 24)
                    .padding(.top, 24)
                    .padding(.bottom, 60)
                Spacer()
            }
        }.edgesIgnoringSafeArea(.top)

       // AREA I'M TRYING TO MODIFY OPACITY ON SCROLL
        ZStack {

            GeometryReader { geometry in
            ZStack {
                    VStack {
                       Text("")
                           .frame(width: geometry.size.width, height: 120)
                        .background(Color.white)
                        .opacity(0.3                     )
                    Spacer()
                    } 
            }.edgesIgnoringSafeArea(.top) // Ends ZStack
            } // Ends Geometry Reader

            VStack {
                GeometryReader { gr in
                    HStack {
                        Button(action: {self.presentationMode.wrappedValue.dismiss()}) {
                            Image(systemName: "chevron.left")
                                .foregroundColor(.black)
                                .padding(.leading, 16)
                            HStack {
                                Text("Venues · Venue Details")
                                    .font(.system(size: 15))
                                    .fontWeight(.bold)
                                    .foregroundColor(Color.black)

                                    .padding()
                                Spacer()
                            }
                        }.frame(width: gr.size.width * 0.92, height: 48)
                            .background(Color.white)
                            .cornerRadius(8)

                    }.padding(.leading, 16)
                    Spacer()
                }
            }
            .padding(.top, 50)
            .edgesIgnoringSafeArea(.top)
        } // Ends Floating Menu ZStack

    } // Second ZStack
}

}

Answer 1

Here is a demo of idea.

The code just shows the approach and due to simplicity it can be easily integrated/transferred. All background colors is just for better visibility, as well as calculation might be more complex and included animations, but the idea kept the same - it is possible to read rect of image in global coordinates using GeometryProxy and depending on that change opacity of some other view via corresponding @State.

struct TestScrollDependentOpacity: View {

    @State private var barOpacity: Double = 0

    var body: some View {
        ZStack(alignment: .top) {
            mainContent
            floatingBar
        }
    }

    private var mainContent: some View {
        ScrollView {
            GeometryReader { g -> AnyView in
                let rect = g.frame(in: .global)
                DispatchQueue.main.async {
                    self.barOpacity = rect.maxY < 0 ? 0.5 : 0.0
                }
                return AnyView(Image(systemName: "sun.max")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .position(x: g.size.width / 2.0, y: g.size.height / 2.0))
            }
            .frame(height: 100).background(Color.yellow)

            VStack(alignment: .leading) {
                ForEach (0..<40) { i in
                    HStack {
                        Text("Text \(i)").padding()
                        Spacer()
                    }
                }
            }.background(Color.green)
        }
    }

    private var floatingBar: some View {
        HStack {
            Button("Left") { }
            Spacer()
            Button("Right") { }
        }
        .padding()
        .background(Color.white.opacity(barOpacity))
        .edgesIgnoringSafeArea(.top)
    }
}