position: sticky; のサンプル
例えばこのページのサンプルの様に、長い文章のあるページで、章タイトルを通過したら見出しが追従する場合などに使えそうです。
1章- このboxがstickyを適用しています
Lorem ipsum dolor sit amet. Et reiciendis laborum ut amet accusamus et fuga consequatur aut inventore debitis et ipsa enim sit rerum error vel galisum autem. Quo fugiat voluptatem ea voluptates blanditiis hic rerum nemo sed distinctio enim. Et eaque dolores aut eligendi galisum et voluptatem. Ut tempora molestiae ab impedit optio eos iusto sint nam odio voluptatibus non voluptatem dolores. Ut voluptas dolorum non quis voluptatem At quidem voluptas non dolores alias quis dolores. Et eaque nemo et dignissimos corrupti ut nihil obcaecati sit provident expedita sed dolores officia ut dolore architecto At dignissimos commodi? Ex quia placeat et laboriosam nemo et consequatur vitae qui consequatur blanditiis et numquam perspiciatis sit quaerat molestiae rem nostrum omnis. Ut beatae deleniti sit galisum quibusdam eos rerum?
Sed accusamus nisi qui reprehenderit quia aut maiores nulla? Et repellat inventore nam quia dolores hic recusandae ut quibusdam necessitatibus et maxime earum. Aut internos quia ut asperiores ratione aut dolorum omnis non excepturi nisi ex nesciunt nihil ab voluptas galisum ut ipsam suscipit. Qui sapiente voluptatem est placeat nesciunt rem nobis impedit sed magnam sint ut accusamus tempore. Qui sequi consequatur qui quas quis et delectus autem 33 provident odio ut ducimus itaque sit ducimus incidunt rem commodi molestiae. Ab veritatis laborum ut ullam autem ex impedit provident aut facilis iusto aut perspiciatis voluptatem sed praesentium rerum. Qui omnis culpa ut beatae neque non officiis numquam ex eligendi odio. Aut voluptas provident aut illo neque ad commodi inventore qui galisum quam ad voluptas sint non accusamus cumque sed voluptatum ullam. Non eaque assumenda qui maiores voluptates et optio galisum nam dicta blanditiis? Non earum enim et tempore nesciunt est enim velit ea quos iure vel rerum alias. Et numquam quos et voluptas quas nam voluptatem quidem in fuga provident sed incidunt labore ut molestiae voluptas nam nihil voluptate.
Vel nulla quis vel quos magnam ab magnam delectus aut odio voluptatem. Est officiis voluptatem est eveniet fugit vel alias modi ad velit sapiente. Eum rerum adipisci est eius commodi rem soluta neque sit expedita corrupti eum exercitationem fuga. Et eligendi quasi et esse rerum At ratione tenetur. Qui officia voluptates non laborum unde At sapiente illo. Et omnis galisum sed architecto veritatis et nobis debitis quo asperiores labore et doloremque omnis vel suscipit rerum. Non vitae eligendi est voluptate fugiat ut dolores doloremque ut veritatis nisi et architecto molestiae aut excepturi nihil. A autem ratione aut natus similique ex amet possimus quo unde eaque aut dignissimos quasi.
2章- このboxがstickyを適用しています
Lorem ipsum dolor sit amet. Et reiciendis laborum ut amet accusamus et fuga consequatur aut inventore debitis et ipsa enim sit rerum error vel galisum autem. Quo fugiat voluptatem ea voluptates blanditiis hic rerum nemo sed distinctio enim. Et eaque dolores aut eligendi galisum et voluptatem. Ut tempora molestiae ab impedit optio eos iusto sint nam odio voluptatibus non voluptatem dolores. Ut voluptas dolorum non quis voluptatem At quidem voluptas non dolores alias quis dolores. Et eaque nemo et dignissimos corrupti ut nihil obcaecati sit provident expedita sed dolores officia ut dolore architecto At dignissimos commodi? Ex quia placeat et laboriosam nemo et consequatur vitae qui consequatur blanditiis et numquam perspiciatis sit quaerat molestiae rem nostrum omnis. Ut beatae deleniti sit galisum quibusdam eos rerum?
Sed accusamus nisi qui reprehenderit quia aut maiores nulla? Et repellat inventore nam quia dolores hic recusandae ut quibusdam necessitatibus et maxime earum. Aut internos quia ut asperiores ratione aut dolorum omnis non excepturi nisi ex nesciunt nihil ab voluptas galisum ut ipsam suscipit. Qui sapiente voluptatem est placeat nesciunt rem nobis impedit sed magnam sint ut accusamus tempore. Qui sequi consequatur qui quas quis et delectus autem 33 provident odio ut ducimus itaque sit ducimus incidunt rem commodi molestiae. Ab veritatis laborum ut ullam autem ex impedit provident aut facilis iusto aut perspiciatis voluptatem sed praesentium rerum. Qui omnis culpa ut beatae neque non officiis numquam ex eligendi odio. Aut voluptas provident aut illo neque ad commodi inventore qui galisum quam ad voluptas sint non accusamus cumque sed voluptatum ullam. Non eaque assumenda qui maiores voluptates et optio galisum nam dicta blanditiis? Non earum enim et tempore nesciunt est enim velit ea quos iure vel rerum alias. Et numquam quos et voluptas quas nam voluptatem quidem in fuga provident sed incidunt labore ut molestiae voluptas nam nihil voluptate.
Vel nulla quis vel quos magnam ab magnam delectus aut odio voluptatem. Est officiis voluptatem est eveniet fugit vel alias modi ad velit sapiente. Eum rerum adipisci est eius commodi rem soluta neque sit expedita corrupti eum exercitationem fuga. Et eligendi quasi et esse rerum At ratione tenetur. Qui officia voluptates non laborum unde At sapiente illo. Et omnis galisum sed architecto veritatis et nobis debitis quo asperiores labore et doloremque omnis vel suscipit rerum. Non vitae eligendi est voluptate fugiat ut dolores doloremque ut veritatis nisi et architecto molestiae aut excepturi nihil. A autem ratione aut natus similique ex amet possimus quo unde eaque aut dignissimos quasi.
3章- このboxがstickyを適用しています
Lorem ipsum dolor sit amet. Et reiciendis laborum ut amet accusamus et fuga consequatur aut inventore debitis et ipsa enim sit rerum error vel galisum autem. Quo fugiat voluptatem ea voluptates blanditiis hic rerum nemo sed distinctio enim. Et eaque dolores aut eligendi galisum et voluptatem. Ut tempora molestiae ab impedit optio eos iusto sint nam odio voluptatibus non voluptatem dolores. Ut voluptas dolorum non quis voluptatem At quidem voluptas non dolores alias quis dolores. Et eaque nemo et dignissimos corrupti ut nihil obcaecati sit provident expedita sed dolores officia ut dolore architecto At dignissimos commodi? Ex quia placeat et laboriosam nemo et consequatur vitae qui consequatur blanditiis et numquam perspiciatis sit quaerat molestiae rem nostrum omnis. Ut beatae deleniti sit galisum quibusdam eos rerum?
Sed accusamus nisi qui reprehenderit quia aut maiores nulla? Et repellat inventore nam quia dolores hic recusandae ut quibusdam necessitatibus et maxime earum. Aut internos quia ut asperiores ratione aut dolorum omnis non excepturi nisi ex nesciunt nihil ab voluptas galisum ut ipsam suscipit. Qui sapiente voluptatem est placeat nesciunt rem nobis impedit sed magnam sint ut accusamus tempore. Qui sequi consequatur qui quas quis et delectus autem 33 provident odio ut ducimus itaque sit ducimus incidunt rem commodi molestiae. Ab veritatis laborum ut ullam autem ex impedit provident aut facilis iusto aut perspiciatis voluptatem sed praesentium rerum. Qui omnis culpa ut beatae neque non officiis numquam ex eligendi odio. Aut voluptas provident aut illo neque ad commodi inventore qui galisum quam ad voluptas sint non accusamus cumque sed voluptatum ullam. Non eaque assumenda qui maiores voluptates et optio galisum nam dicta blanditiis? Non earum enim et tempore nesciunt est enim velit ea quos iure vel rerum alias. Et numquam quos et voluptas quas nam voluptatem quidem in fuga provident sed incidunt labore ut molestiae voluptas nam nihil voluptate.
Vel nulla quis vel quos magnam ab magnam delectus aut odio voluptatem. Est officiis voluptatem est eveniet fugit vel alias modi ad velit sapiente. Eum rerum adipisci est eius commodi rem soluta neque sit expedita corrupti eum exercitationem fuga. Et eligendi quasi et esse rerum At ratione tenetur. Qui officia voluptates non laborum unde At sapiente illo. Et omnis galisum sed architecto veritatis et nobis debitis quo asperiores labore et doloremque omnis vel suscipit rerum. Non vitae eligendi est voluptate fugiat ut dolores doloremque ut veritatis nisi et architecto molestiae aut excepturi nihil. A autem ratione aut natus similique ex amet possimus quo unde eaque aut dignissimos quasi.