Question

I have been impressed with Facebook’s new timeline feature, especially when you scroll down the profile and a small menu is displayed giving you the options to view their timeline or view more information about them. This div is only displayed when you scroll down to a certain length of the page, and then when you scroll back up i disappears again.

I’m building a project and this sort of system would benefit it hugely. There’s a long FAQ page and I think it would be better to offer the menu of the FAQ to the left of the screen so the user can scroll down naturally and have the option to jump to different questions, instead of using an accordion system and have the user click on the FAQ title and then display the content.

However, I’m not sure what it’s called and how I would go about building it. Has anyone ever built something like this?

Answer 1

I found the answer, what I was looking for is called “sticky divs”. I first found this post on Stackoverflow, which then led me to this website which explained the concept and gave the code.

Using that code, I tinkered with it to give me what I needed. So in the HTML I put:

<div id="quicknav" style="display:none;">
    <p>Navigation!</p>
</div>

And in the JQuery:

function sticky_relocate() {
  var window_top = $(window).scrollTop();

  var div_top = $('#faq').offset().top;

  if (window_top > div_top)
    $('#quicknav').show()
  else
    $('#quicknav').hide();
  }

  // If you have jQuery directly, use the following line, instead
  $(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
  });

This code has made me have a Facebook Timeline-esque div, which I’m happy about!