JS opacity - Why is this working on jsfiddle but not in live environment?

JS opacity - Why is this working on jsfiddle but not in live environment?

I've found the code below on stackoverflow and would like to implement in
on my page This is working on JSFiddle http://jsfiddle.net/7RHxz/ but not
when I preview the page in live environment on my web browser. I suspect
that this might be due to the "on load" process or something like that?
I've just added the script below just before . Maybe there's something
missing? Thanks
<script>
var target = $('#intro-right');
var targetHeight = target.outerHeight();
$(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});
</script>