Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Item position type shift from relative to static effect?

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.

like image 856
Andrei Zisu Avatar asked Dec 11 '25 22:12

Andrei Zisu


1 Answers

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.

like image 64
epascarello Avatar answered Dec 14 '25 10:12

epascarello



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!