jQuery fadeout on scroll - what am I doing wrong?

Question

I am trying to implement http://jsfiddle.net/NKgG9/6/ into my website.

It's supposed to fade out a div when the user starts scrolling down. Instead the div just sits there, comlpetely visible and unchanging. I'm a massive newbie to java so figure it's something really basic and fundamental I'm missing.

Here's what I'm doing:

Inside the head tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script>
$(document).ready(function() {
    var targets = $(".scroll_note, .social");
    if($(window).scrollTop() > 10){
      targets.hide();
    }
    $(window).scroll(function(){
        var pos = $(window).scrollTop();
        if(pos > 10){
            targets.stop(true, true).fadeOut("fast" );
        } else {
            targets.stop(true, true).fadeIn("fast");
        }
    });
});?
</script>

And then inside the body tag:

<div class="scroll_note">Scroll down to see our amazing specials!</div>

Please help me! Thanks, Alex :)

Answer 1

The other script you include, fadeslideshow.js , calls jQuery.noConflict which removes the global assignment of jQuery to the $ variable. You have a few ways around this:

1. Remove the call to jQuery.noConflict in fadeslideshow.js . This may break that slideshow script, however.
2. Use jQuery instead of $ in your JavaScript code above.

3. Wrap your code in a self-invoking function that remaps the global jQuery to $ :

    (function($) { /* your code here */ })(jQuery); 

Answer 2

You have a ? at the end of your code that is going to throw an error and kill the script. Remove it and you should be all set.

Edit:

I see you posted your site. Your script tag pointing to the google API is malformed. It doesn't start with http: , just starts with // . Fix that, then see where you are

Edit2 : Wyatt pointed out this is not true. See his answer.