I have set up a ‘fixed’ position menu bar with a banner attached below it. The banner text is in a div with a semi-transparent background. The menu is initially placed near the top of the document over a large photo that extends past a normal PC viewport. There are blog entries located on the page beneath the photo. Since the menu bar is a “fixed” position element, when the user scrolls down the page, the menu and banner move down with the viewport. But once the banner text reaches the bottom of the photo (or the top of the first blog heading) I would like to make the banner disappear, so that only the menu bar is still visible.when the user continues scrolling beneath the photo. (Otherwise, the banner text would interfere with the readability of the blog entries.).
I appreciate any help you can provide.