CSS Semi-fixed Element?

Question

I remember seeing an example of this recently, but for the life of me I can't find the site.

It was a button or something similar that sat in its place near the top of the screen, then when you scroll down it stays on screen.

Now that I think about it, it must have been javascript-powered, but it looked really natural.

Does anyone know of a site with this functionality or information on how to do it?

EDIT
No, it wasn't just position:fixed or permanently floated using javascript.

Answer 1

Hope this helps.

http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/

Answer 2

Thanks durilai for pointing out that this has been covered: http://stackoverflow.com/questions/2458969/how-to-make-an-element-slide-with-the-viewport-as-it-scrolls/2458990#2458990

As it turns out, it was right here on SO (the question editing page) that I saw this. The "How to Format" box sits to the right of the editing box and moves with the rest of the page, but becomes position:fixed when it should be scrolled out of view.

This is done by SO using jQuery. I think they have some custom code there, but here is my implementation:

var scrollerTopMargin = $("#scroll-container").offset().top;
$(window).scroll(function(){
    var c = $(window).scrollTop();
    var d = $("#scroll-container");
    if (c > scrollerTopMargin) {
        d.css({ position: "fixed", top: "0px"   });
    }
    else if (c <= scrollerTopMargin) 
    {
        d.css({ position: "relative", top: ""   });
    }
});

Answer 3

I implemented kelso's solution and it works perfectly on Firefox and Chrome. However, IE 8 is not playing ball.

I have rolled the code out so that you can see the problem I am having on a live website: Gran Via hotels

IE is listening for scroll events but is not moving the div as the user scrolls down the page. It seems as though the following line is not doing anything in IE:

d.css({ position: "fixed", top: "0px"   });

The first line is also evaluating to -2 in IE whereas in Firefox it's 377.

var scrollerTopMargin = $("#scroll-container").offset().top;

I am no CSS expert and have been pulling my hair out on this. There must be a simple solution! Please help!

Thanks Ben