I recently created a script for my navigation bar that turns it into a sticky navigation once it reaches the top of the page.
Everything works perfectly when I include the script directly in my index file using <script> tags. However, when I try to place it in an external JavaScript file, it doesn't seem to work at all.
Check out the complete code on JSFiddle
Here's the script:
var windw = this;
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'fixed',
top: "20px"
});
} else {
$this.css({
position: 'absolute',
bottom: '0',
left: '0', right:'0',
top: 'inherit'
});
}
});
};
$('#mainNav').followTo( $(window).height() - ( $('#mainNav').innerHeight() + $('.globalHeader').innerHeight() ));