An element with the property position: sticky creates a
positioning context relative to the nearest ancestor's
scroll port.
The element will behave like a relatively positioned element until a certain point in the scroll is reached, at which point it will behave like a fixed element.
The sticking point is determined by the offset property values. In this example the boxes container will 'stick' once the scroll moves them to within 5% of the top of the page.
Content added to allow for page scrolling ...
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga hic est
ipsa corrupti et. Distinctio, est cupiditate labore veniam eligendi
natus, eveniet nostrum consectetur delectus pariatur obcaecati modi ea
libero. Perspiciatis sit ratione inventore aliquid officiis pariatur,
neque esse, ad fuga maxime ipsam error nemo labore vero, quaerat
eligendi delectus alias libero placeat aut deleniti at hic. Saepe,
repellat sit! Recusandae impedit mollitia repellat, dolorum neque
excepturi veritatis, a porro inventore consequatur architecto ratione
dignissimos aspernatur et consectetur soluta, aliquam maiores eveniet
non exercitationem consequuntur autem iusto? Enim, accusamus tempore?
Aut quaerat aliquam nesciunt culpa optio quia! Quibusdam minima expedita
asperiores exercitationem quam quidem odit amet! Modi saepe officiis
quas ab, quo eveniet sequi fugit sit sapiente provident, quod deleniti.
Obcaecati, iste soluta. Amet accusamus aut blanditiis fugiat culpa ex
reiciendis id veritatis dolore omnis possimus iure soluta eum, illum
earum minus aperiam fuga excepturi at eveniet aspernatur dolorem.
Pariatur. Debitis consequatur tempore ex asperiores porro voluptatem
neque numquam molestias commodi ipsum accusamus ducimus culpa,
laboriosam doloribus consectetur ullam nesciunt totam repellendus at
quisquam eligendi qui, similique quis! Harum, nam? Nisi officia
recusandae assumenda inventore tempore laboriosam ab nesciunt quidem
similique reiciendis fuga repudiandae doloribus corrupti veniam, sed,
amet soluta ut excepturi ducimus aperiam molestiae architecto asperiores
minus? Maxime, aperiam. Atque ipsum iusto dolores odio delectus
inventore est veniam mollitia, illum eveniet rerum, quam ab odit
provident quos, fugit in maiores tenetur corporis. Quibusdam quos,
soluta cupiditate repellendus voluptas laborum. In ad ut ipsam?
Laudantium, ea sint obcaecati animi dignissimos ducimus nemo temporibus
voluptas quisquam necessitatibus harum? Repudiandae cupiditate eius
suscipit ipsum voluptatem vero autem, harum itaque, asperiores, possimus
magni! Maiores fuga, porro perferendis provident iste facere sit est
quidem, deserunt dignissimos adipisci ipsum, expedita neque
reprehenderit accusantium quas sequi non aliquam cupiditate eos totam
nesciunt corrupti a. Vero, reiciendis? Id blanditiis doloremque,
molestias facere nobis eos temporibus dolores, libero in ad consequuntur
explicabo dolorum nihil obcaecati error aut. Molestiae autem soluta
corporis porro pariatur quis odit consectetur atque doloribus. Cumque
quisquam aperiam autem, omnis laborum sapiente minus pariatur alias
placeat quo perferendis sunt voluptate id nam itaque quidem
consequuntur, animi atque ab quaerat esse magni! Illum, quo. Maxime,
fugiat. Accusamus, molestiae nam velit rerum dolore tempore a quia
voluptatibus optio aliquid. Officiis cumque, cupiditate culpa autem ea
et ducimus est modi? Vel nisi cupiditate rerum necessitatibus quos
dolores ex? Nulla eaque esse saepe doloribus pariatur vel quia quaerat
quos, ab impedit nesciunt error, aut aliquid voluptas dolorum magnam
sint vitae incidunt unde repellendus ratione rerum enim. Nemo,
distinctio consectetur. Eius eaque non, eveniet commodi officia dolore
porro. Quis odit impedit totam, modi officia quo. Corporis nisi sint
neque consectetur eveniet voluptate quod, cum impedit dignissimos ipsa
architecto debitis labore! Voluptatum libero, provident consequuntur,
sint veniam cumque, eveniet molestiae quae mollitia asperiores quibusdam
fugit labore ratione beatae culpa molestias totam accusamus aut
consectetur fugiat quisquam ipsam doloribus suscipit qui! Aperiam.
Omnis, doloremque adipisci! Atque fugit odio sapiente autem perspiciatis
voluptatum, voluptatem accusamus libero impedit laborum repellat
incidunt enim laboriosam nobis culpa nulla fuga nihil possimus ipsum
temporibus porro quidem nam! Fuga at praesentium itaque doloribus ipsa
rerum doloremque, quas debitis soluta quae quis id nobis illo magni
incidunt. Consectetur earum, labore odio quidem maiores dolorum
repudiandae laudantium laborum quod iure. Consequuntur voluptatum quod
ut incidunt atque corrupti vero voluptates numquam dolorem! Ducimus
eius, iure eos assumenda recusandae laboriosam laborum iusto cumque
molestias error aliquid veniam hic voluptatem quod quibusdam animi! Quod
velit natus tempore soluta odio atque quo repellendus totam
necessitatibus, corrupti porro ratione impedit explicabo voluptatem
dolorum commodi doloremque, unde facere. Delectus sint maxime, est ipsam
eos quaerat sunt?