Nowy sposób pozycjonowania elementów: position: sticky

position: sticky to kolejny sposób na pozycjonowanie elementów na stronie, który kilka dni temu został wprowadzony do Goolgle Chrome Canary o czym na html5rocks poinformował Eric Bidelman.

Sposób działania jest prosty. Element z pozycjonowaniem sticky zachowuje się tak jak by było pozycjonowany relatywnie, aż do momenty gdy nie znajdzie się w określonej odległości od krawędzi przeglądarki, którą definiujemy poprzez właściwości top, bottom, left, right. Po osiągnięciu takiego stanu, element zaczyna być pozycjonowany przez fixed do czasu aż rodzic nie znajdzie się po za viewportem. By to lepiej zrozumieć, przejdźmy do przykładu.

Przykład

Spróbujmy nadać dowolnemu elementowi pozycjonowanie sticky

div {
     position: -webkit-sticky;
     position: -moz-sticky;
     position: -o-sticky;
     position: -ms-sticky;
     position: sticky;
     top: 10px;
}

Poprzez powyższe linijki przekazujemy div-owi informację, że ma być pozycjonowany relatywnie do czasu gdy nie znajdzie się w pozycji 10px od górnej krawędzi viewportu. Dalej element ma działać jak position: fixed.

Przykład: http://jsbin.com/inegow/3 (tylko w Chrome 23.0.1247.0+)

Wsparcie

Na chwilę obecną, wartość sticky nie jest częścią specyfikacji tylko propozycją, którą developerzy Google Chrome wprowadzili do swojej przeglądarki. Wiecej informacji na ten temat znajdziesz pod tym linkiem.