Question

How is this effect named ? How is it implemented

You can see it on this page on the portofolio filter box.

I’ve seen it around for a year, it’s an interesting pattern, it’s so famous gmail now uses it.

Answer 1

You can view the JavaScript they use: fixed.js

Their css:

#rightFloat {
    float: right;
    padding-top: 20px;
    position: absolute;
    top: 0;
    width: 205px;
}
#rightFloat.fixed {
    position: fixed;
    top: 0;
}

What is the name? I have no clue if it has a name 🙂 I bet people call it 100 different things.

[Edit:] names I have heard : sticky scroll, contained sticky scroll, conditional sticky scroll, watermarked content.