Javascript problem if using prettyphoto


I have a hidden header (javascript) which shows categories on top when you scroll down 150px or more in a page.

Problem is that if I click on image then the javascript stops working.

Here’s is the code:

<br />
<script type="text/javascript"><br />
{literal}$(function() {<br />
  var bar = $('.headerSlideContainer1');<br />
  var top = bar.css('top');<br />
  $(window).scroll(function() {<br />
   if($(this).scrollTop() > 150) {<br />
	bar.stop().animate({'top' : '0px'}, 50);<br />
   } else {<br />
	bar.stop().animate({'top' : top}, 50);<br />
   }<br />
  });<br />
});{/literal}<br />
</script><br />

```<br />
<br />
If I use fancybox or lightbox then the code works. As I would like to use prettyphoto to enlarge the images I would like to know if anyone knows how could I fix this code so it will work with prettyphoto?<br />
I have tried several javascripts for hidden header and all of them stopped working if using prettyphoto.<br />
<br />