Fix Pagination Box while scrolling

Inspired by Brad Stevens' old post which popped up recently,


Fix Tab menu when scrolling


I've been trying to do the same thing with the Pagination box. I'd like it to stay fixed to the top of the screen while scrolling. I've tried a few things but with indifferent success (I'm teaching myself and don't really understand what I'm doing).


Changing the position in CSS was a fairly simple solution:


div.kn-pagination {

position: fixed;

right: 30px;

top: 20px;

}

The box just stays put in the top right corner. It works, it's just not very neat.


Here's my attempt at using Javascript:


$(document).scroll(function() {

if ($(window).scrollTop() > 310){

$('.kn-pagination').css({'position':'fixed', 'top':'0px', 'z-index':'9999'})

}else{$('.kn-pagination').css({'position': 'static', 'width': '100%'})

}})

With this I managed to make it scroll at the top of the page! A small victory, but I seem to be missing something. As soon as I start to scroll the Pagination box moves over to the left of the table and then is stuck to the left of the screen. I can't seem to move it back to the right where it belongs even when I modify the CSS in the script.


Any suggestions?