sneakpeek

Hides header when scrolling down. Shows header when scrolling up. No external dependencies. Similar to Headroom.js. Weighs less than 1kB gzipped.

Try the demo.

It shows/hides the header by toggling a sneakpeek--hidden class.

<!-- initially -->
<header>

<!-- scrolling down -->
<header class="sneakpeek--hidden">

<!-- scrolling up -->
<header>

Style it however you want.

Install

Install from npm:

npm install sneakpeek

Usage

With browserify:

sneakpeek = require('sneakpeek')
sneakpeek(document.getElementById('header'))

Regular script tags:

<script src="index.js"></script>
<script>
  sneakpeek(document.getElementById('header'))
</script>

Events

If you don't want to switch a class as a side effect, but decide yourself on what to do when the user scrolls up or down, use sneakpeek.emitter:

emitter = require('sneakpeek').emitter

emitter.on('hide', function() { console.log('user scrolled down, header hidden') })
emitter.on('show', function() { console.log('user scrolled up, header shown')  })

License

Licensed under the MIT License.