sneakpeek

Hides header when scrolling down. Shows header when scrolling up.

Usage no npm install needed!

<script type="module">
  import sneakpeek from 'https://cdn.skypack.dev/sneakpeek';
</script>

README

sneakpeek

Example showing what sneakpeek might look like in production

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 scolled down, header hidden') })
emitter.on('show', function() { console.log('user scrolled up, header shown')  })

License

Licensed under the MIT License.