This article uses jquery's scrollTop method to monitor the vertical scrolling pixels of the page, and hide or display the top navigation bar based on the pixels.
Effect preview URL: http://www.keleyi.com/keleyi/phtml/scrolloversee.htm
Introduction to scrollTop:
Syntax
$(selector).scrollTop(offset)
Parameters
offset
Description
Optional. Specifies the offset, in pixels, from the top of the scroll bar.
Definition and Usage
scrollTop() method returns or sets the vertical position of the scroll bar of the matching element.
scroll top offset refers to the offset of the scroll bar relative to its top.
If this method sets no parameters, returns the offset in pixels from the top of the scroll bar.
Tips and Notes
Note: This method works for both visible and invisible elements.
Note: When used to get a value, this method only returns the scroll top offset of the first matching element.
Note: When used to set a value, this method sets the scroll top offset of all matching elements.
Attach the complete code, save it to an html file, open it to experience the effect: