kysebo/sticky-pagination-fixer

Does your site have a sticky header? You should use this script to fix keyboard-based pagination events.

The Sticky Pagination Fixer

##Sticky headers are super annoying for spacebar paginators.

Why?

Because sticky headers effectively change the height of the viewport without telling the browser.

So?

Well, browsers use their internal measurement of the viewport's height to determine how tall a "page" is, which it uses to determine how far to scroll when a user hits the space or page down keys.

Again: So?

Take a look at this, a diagram of a normal pagination event:

The box is the viewport, and the red line is the last thing a reader sees before triggering a "paginate down" event. The browsers' pagination logic is designed so the red line is also the first thing the reader sees after their eyes scan back up.

Now look what happens when a sticky header enters the picture (heh):

Because the effective height of the viewport is being altered by the sticky header, it means not only is our red line totally obscured but so are two other lines we haven't even seen yet. The reader now has to scroll back up to see what they missed (if they even notice). If you can't see how annoying this is you might be a horrible monster.

Oh. Ok.

The amount of overlap, of course, varies based on the height of the sticky header in question, but the header will never not interfere to some degree.

##Take over that scroll.

Do your readers a favor and install The Sticky Pagination Fixer. It captures native pagination-related events, recalculates the height of the viewport, and then scrolls the page to the correct point. Here's a demo.

##Some notes.

• Sometimes we use the space bar for other things, like... entering spaces in text fields. The Sticky Pagination Fixer takes that into account.
• Sometimes we also use the space bar for play/pause events in media players. This is quite a bit trickier — we'll need to think about this.
• There are probably some other native behaviors we should be accommodating as well.
• No jQuery required.
• You might be thinking, "Aaagh, JavaScript!" Well, stop. If JS isn't available or this script breaks? Scrolling will happen as normal. "Graceful degradation", my friends. (Or "progressive enhancement", if you absolutely must.)

##Some credit.

The idea to finally write this script came from the New York Times site, which recently aded a sticky header and thankfully has a similar feature built in. And thanks to Allen Tan who pointed me to this smooth scrolling script on Stack Exchange.

##Plus: it could use a better name.

Any ideas?