Javascript DOM events question


I’m just starting to learn JavaScript, and I’m looking for a particular type of event I can use to trigger my script. I’m not sure if the event I need exists. I’m hoping someone here can steer me in the right direction.

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 thought I could call a JavaScript function that changes the div’s display to ‘none’ when the banner text goes past the photo, (sort of like a mouseover, except that users wouldn’t be passing a mouse over the photo; they would just be scrolling the banner over it). So the question is which type of event could trigger that? I glanced through the built-in events, and nothing seems to fit the bill. If that’s not the way to get the banner to get off the screen, what is?

I appreciate any help you can provide.