0

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>
Francesca
  • 26,842
  • 28
  • 90
  • 153
  • A [jsFiddle](http://jsfiddle.net/) would be nice. – Ruddy Feb 24 '14 at 15:33
  • 2
    There are [many](http://stackoverflow.com/questions/11341177/set-div-position-to-fixed-after-scrolling-100px) [SO questions](http://stackoverflow.com/questions/17390989/how-to-fix-a-div-after-scrolling-a-bit-with-jquery) [on the topic](http://stackoverflow.com/questions/20100461/jquery-position-div-fixed-at-top-on-scroll) – Zach Saucier Feb 24 '14 at 15:36
  • Unrelated, but your page loads quite slowly. Is there any particular reason that you are loading one background, then loading another one to cover up the other one? – SimplyAzuma Feb 24 '14 at 15:38
  • @MathewMacLean it would normally be a full background video. I disabled it for dev eeasons cos it's annoying. – Francesca Feb 26 '14 at 12:41
  • @Francesca See my answer. It may accomplish what you are looking for. – SimplyAzuma Feb 26 '14 at 12:59

1 Answers1

2

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.

SimplyAzuma
  • 25,214
  • 3
  • 23
  • 39