Scrolling left column

Hi, thanks to an expert here, I've almost got what I need here: http://dev2.magickitchen.com/testimonials-homestyle.html

user name: pepe, pw: BobTheBuilder45!!

The left column starts to scroll at the right time, so I can still see the bottom item, Special Deals Page, while still seeing the top item, Gifts.

There are two problems I can't solve.

1. Once I start to scroll, there is a space above the words gift. I'd like to tighten that up. See screenshot space.jpg.
2. Depending on how far I scroll down the page, then scroll back up, the word Gifts might return to its proper place, or it might overlap the section above it, or there might be a big space. See screenshot gifts.jpg.

I've wrapped the part to scroll in <div id="scrollingDiv">, and the jquery is:
<script src="js/jquery-1.11.2.js"></script>

<script>
var $window = $(window);

function scrollMenu(){
  var pos = $window.scrollTop();
  if (pos > 255)
  $('#scrollingDiv').css('marginTop', (pos-290) + 'px');
}

$window.bind('scroll', scrollMenu);

</script>

Thanks, looking forward to your responses!
space.jpg
gifts.jpg