Tell us more, please. Scrolling up, I can see this, content behind the black bar. What more do you want to achieve?
When I scroll the page I would like the content to not appear on top of the page. Like the image below.
Can i use scroll effect - Opacity to fix this? Or something else?
To achieve this, you need another layer above the header with same content, fitting your background jmage. In layer order it should be above content layer.
Alternatively create a complete header with part of the fitting background image and that black menu bar - in layer order it should be above content. That might be more elegant.
Second Alternative : keeping fixed width Breakpoint you could also use a scroll motion effect by hiding content as desired.