How to implement Scroll to Fixed – navigation effect

I am trying to implement a scroll to fixed navigation bar in a wordpress theme. The bar is beneath a banner image and then as the page was scrolled to a certain point the navigation would fix to the bottom of the header.

First I downloaded a jquery plugin called scroll to fixed available here.

I popped the jquery-scrolltofixed-min.js file in my js file of my theme and then put the following in my header.php between the tags:

<script src="...path to file.... /js/jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script>
   jQuery(function() {
 if ( jQuery(window).width() > 1026) {   
            jQuery('#nav_bar').scrollToFixed({marginTop:100,zIndex:200});
        }
});</script>

Ta da it worked a treat.