"collapsing" position: fixed element using jquery

Question

I'm trying to implement the effect the logo has in this page, where it is fixed on the top of the page, but when scrolling down, only a part of it remains visible, not the whole element.

I have found plenty of jquery plugins that will keep the top of an element at the top of the page, but none that will let me customize how high the element will stay. My javascript is not up to coding something from scratch. Does anyone have any suggestions for plugins that might be useful?

Answer 1

You shouldn't need a plugin for this. CSS can keep the logo fixed and you can use JavaScript to change the display of the element once the user begins to scroll the page.

Assuming that your logo has the ID of logo, the CSS would be:

#logo {
  top: 0;
  position: fixed;
}

Since it appears you're using jQuery, you can do something like this:

$(function() {

  // gets a reference to the document based on which browser is being used
  var oDoc = $.browser.msie === true ? window : document;

  // event handler for when the user scrolls
  $(oDoc).scroll(function() {

    // if the user is at the top, display the whole image
    if($(this).scrollTop() === 0) {
      $('#logo').css('margin-top', 0);

    // otherwise, pull the image up a single em (200 is arbitrary)
    } else if($(this).scrollTop() > 200) {
      $('#logo').css('margin-top', '-1em');
    }

  });

});