SwiftUI - Change opacity of a view based on position of scrollview - 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)
}
}