reservemedia / zurvu-jquery-peek

Easy way to hide and show your navigation.

jQuery.Peek

jQuery Peek is a great way to keep your navigation while preserving your precious screen real estate for your content. While the user is viewing the page, the navigation is tucked away. When the user scrolls up (or down), the navigation will reappear.

Note: This is a fork of the original repository that was originally forked to allow support for negative indices.

The major maintainer is: @mcollis.

Getting Started

Download the production version or the development version.

In your web page:

<script src="jquery.js"></script>
<script src="dist/jquery.peek.min.js"></script>
<script>
jQuery(function($) {
  $('.top-nav').peek();
});
</script>

Documentation

jQuery Peek is pretty straight forward as far as usage goes.

$(targetElement).peek(options);

Options

showDirection (Default: "up") - What direction should the user be scrolling when the element is showing.

toggleClass (Default: "hidden") - Class used to hide the element.

triggerDelta (Default: 50) - After a user has scrolled more than this many pixels show or hide the target element.

triggerElement (Default: window) - Element to bind the scroll event to.

Examples

Checkout the index.html for working examples.

Zurb Foundation

Zurb Foundation's top navigation bar by default isn't in a fixed position but can be easily done with a couple lines of CSS.

body {
  padding-top: 60px;
}

.top-bar {
  position: fixed;
  width: 100%;
  z-index: 10;
  top: 0;
  transition: top 0.2s ease-in-out;
}

.top-bar.hidden {
  top: -45px;
}

And then add the following JS code:

$('.top-nav').peek();

Twitter's Bootstrap

Bootstrap's top navigation works with Peek out of the box. Simply add the following JS call:

$('.navbar').peek();

Release History

0.1.0

Initial Release