Do I need to define a custom event?


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 one doesn’t exist, can I create an event that does what I want? Or is there another way to get the banner off the screen?

I appreciate any help you can provide.


Hi Gabrielle,

Do you mean you want an effect a little like this: ?


Hi Alice.

Thanks for responding. I really appreciate that you took the time to find a solution for me. (Sorry I took so long to reply. I had final exams this week, so I didn’t see your message until now.)

Your YouTube tutorial was close to the effect I wanted, but I didn’t want the image to disappear or the menubar it was attached to, just the text in the banner overlaying it.

I did find out how to use JavaScript to get the effect I wanted, though. onscroll was the event I was looking for. Once the scrollTop reached a certain point, it triggered the script that set the banner display: none in CSS.

If anyone is interested I found that information on the w3c website in the How To section under “Shrink a Navbar on scroll”. (But instead of shrinking the navbar, I made the banner disappear.)