We can leverage some jQuery code to simplify this. The example shown below should work across all major browsers such as Internet Explorer, Chrome, Firefox, Safari, and Opera.
Example
The following example will result in a sub-menu appearing at the top of the viewer’s display once the user scrolls down to a certain portion of the web page. A new page will open and you can use your mouse to scroll up and down the page. Once you scroll down to a certain point in the page, the header will no longer be visible and the jQuery code will show the sub-menu. As you scroll up, the sub-menu will be hidden as the header comes within the display. You can control when the sub-menu is displayed by modifying this portion of the jQuery code var headerBottom = headerTop + 120;. If you increase the number, you are configuring the sub-menu to be shown or hidden when you scroll farther down on the page. The sub-menu can be displayed anywhere on the page by modifying the appropriate CSS style properties.
