Scrolling navigation not properly working

I’ve been struggling with a piece of code that should be really easy to implement and I just don’t see what I’m doing wrong. I hope you guys can help.

I’m trying to get my left navbar to scroll down when the user is about to scroll past that navbar. I’ve found a great jsfiddle that I’ve tried to implement but so far it is only partly working.

Here is the jsfiddle: http://jsfiddle.net/b43hj/

The site is: http://justaddwater.nl I want the blue navbar on the left to start scrolling when the top of the browser hits the red line on top of the content area. But right now it starts scrolling immediately.

I have a feeling that the js code just isn’t being executed but I could be wrong. Can anyone please help me fix this and then tell me that im an idiot for not seeing the problem myself? ^^’ Thanks!

/css/hagel.css

#sidebar { 
position:fixed;
top:250px;
background-color:red
}

/js/hagel.js

$(window).scroll(function(){
 $("#sidebar").css("top",Math.max(0,250-$(this).scrollTop()));
});

sidebar.php

<div id="sidebar" class="widgets-area">
<?php dynamic_sidebar('sidebar-1'); ?>
</div>

functions.php

<?php
function hagel_script_enqueue() {
//css
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.4', 'all');
wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/hagel.css', array(), '1.0.0', 'all');
//js
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.3.4', true);
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/hagel.js', array(), '1.0.0', true);
}

add_action( 'wp_enqueue_scripts', 'hagel_script_enqueue');