How to add fixed position in menu class for Twenty Twelve theme?

I have already looked at many jquery examples on how to make the menu sticky. I have applied these tutorials on clean html pages and they have worked perfectly. However, when I try to apply it on the Twenty Twelve theme, nothing happens. The fixed attribute doesnt get added to the menu class.

This is the CSS:

.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}

This is my menu:

<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 -->

This is the JQUERY:

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

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

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

stickyNav();

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

Am I missing something?