scroll up bar: Hide the Top Bar when Scrolling Down

The scroll up bar jQuery plugin hides the top bar when scrolling down, and shows it when scrolling up. It’s especially useful on mobile interfaces to save space. The effect is similar to what using sticky navigation that later hides during the scrolling process.

There are multiple uses for the plugin — simple, bar with offset and viewport callbacks. All are available for preview and usage in the demo.

There are a handful of available options to work with. You can pass callback functions in initialization to handle bar visibility events.

  • enterViewport – when the bar enters the viewport
  • fullyEnterViewport – when the bar is completely in the viewport
  • exitViewport – when the bar completely leaves the viewport
  • partiallyExitViewport – when the bar goes from being fully in the viewport to only partially

Install is simple with a script and call or installation using Bower. The plugin is also supported by all major browsers including Chrome, Firefox, Safari, Opera and Internet Explorer.