"sticky" Navigation

So I recently found the perfect code I’ve been looking for to get an element to “stick” to the top of a page while you scroll down. I have it working in a test environment on a div element but I cannot seem to get it to quite work with my WordPress navigation. I got the code from and here is what my JQuery looks like:

$(document).ready(function() {
var stickyNavTop = $('#site-navigation').offset().top;  

var stickyNav = function(){
var scrollTop = $(window).scrollTop();  

if (scrollTop > stickyNavTop) {
    $('#site-navigation').addClass('sticky');
} else {
    $('#site-navigation').removeClass('sticky');
}
};  

stickyNav();  

$(window).scroll(function() {
    stickyNav();
});
});

And my XHTML:

<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

What happens is, when I scroll down, a short white bar appears and follows scroll. The navigation shrinks and the contents disappear. I posted this issue on another forum for some feedback and a moderator suggested it appears the contents are being pushed out and asked if they are being floated. I tested this theory by floating a couple of div elements and

li elements and they stayed in the “sticky” div just fine.
Trouble is, I don’t know much about how the menu is being placed into my code to get a full understanding of what could be causing this. I’ve tried making the navigation bar a solid 200px high just to see what would happen, and in this case it doesn’t shrink when I scroll, but the menu items do still disappear.

Any ideas?