Sidebar sticky menu at a set height

Question

I'm struggling a bit with this on my site.

I want to create a sticky sidebar menu, one that stays with you all as you scroll. However I don't want the menu to start at the top of the page, it needs to be in line with another element which is down the page (and not at a fixed, known amount down the page).

Please see my site here: http://fh80.student.eda.kent.ac.uk/fyp/

I want a sidebar to sit on the left, but in line with the "sports, venues, athletes" boxes. So it stays there all the time unless you scroll further down... and then it follows you.

How can I do this with jQuery? I've already written the basic HTML.

Oh and also, the menu #browserMenu should only show up when you click on one of the links a.moreLink. So actually when you load the site you won't see it. But when you click one of the "more" links, it shows up, and then follows you around.

  <!-- The Browser Menu -->
  <div id="browserMenu">
  <a href="#">Sports</a>
  <a href="#">Athletes</a>
  <a href="#">Venues</a>
  <a href="#">About</a>
  </div>
</div>

Answer 1

EDIT: http://jsfiddle.net/WAsTL/3/ This should solve all of your needs. If it doesn't let me know and I will update it. You can tweak the top: 35%; value to your needs.