Problem with scrollTop function

[greencode]

I have a site that contains a left-hand menu but there's quite a lot of text on the page so I've done it so that when the user scrolls the menu remains at the top of the page (there's also a header so the menu won't remain at the top of the page until the user has scrolled past the header).

I also have images on the page that open up with the fancybox jquery plugin.

Everything works well until I open up one of the images - that works okay - and then scroll back to the top of the page. The menu remains at the very top of the page therefore overlaying the header.

The code I'm using to keep the menu in position is this:

<script>$(function () {
 var $el = $('.country-list'),
   originalTop = $el.offset().top;
   
 $(window).scroll(function(e){
  if ($(this).scrollTop() > originalTop ){
   $el.css({'position': 'fixed', 'top': '0px'});
  } else {
   $el.css({'position': 'absolute', 'top': originalTop});
  }
 });
});</script>

and the code to start fancybox is this:

<script type="text/javascript">
$(document).ready(function() {
$("a.fancylink").fancybox();
});
</script>

Any help would be greatly appreciated.

[adni18]

Instead of finding the original offset of the menu, try finding the clientHeight of the header and add ~10px (of padding) to that for your originalTop variable.

[greencode]

Forgive me but I'm not all that clued up on this... If the header height were 200px can you show me how to write that in the code?

[whoisgregg]

If I understand the code correctly, find this line:

if ($(this).scrollTop() > originalTop ){ 

And replace it with something like:

if ($(this).scrollTop() > originalTop && $(this).scrollTop() > 200){ 

[greencode]

That doesn't seem to work. The exact same thing happens as per the first bit of code. As soon as I click on the image - to open the larger image using the fancybox plugin - then the menu simply sticks to the very top of the page when I scroll back to the top.