Nadpisy druhé úrovně mají nastaveno:
position: sticky; top: 1rem;
Celá kapitola včetně svého nadpisu je vždy obalena prvkem
<div>. Když by při posouvání obsahu stránky nadpis opustil
viditelnou oblast, „přilepí se“ do zadané vzdálenosti od příslušné hrany (zde
1rem od horního okraje) a zůstane tam, dokud je jeho rodičovský prvek
(obalující <div>) alespoň částečně viditelný. Jakmile se
celý rodičovský prvek posune mimo okno, zmizí s ním i nadpis. Zkuste si to.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla sollicitudin tristique. Duis malesuada ipsum a semper commodo. Nullam sit amet dolor vulputate, laoreet justo ac, tristique leo. Integer quis turpis efficitur, eleifend nunc ac, consequat augue. Fusce id pellentesque metus.
Proin vitae volutpat justo, ut mattis orci. Maecenas sit amet iaculis neque. Sed bibendum cursus dolor, eget iaculis risus auctor et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam convallis odio volutpat sem placerat, non vulputate purus rutrum. Nam blandit velit ut ex blandit porttitor vitae sit amet est. Pellentesque mollis rutrum ultricies.
Etiam erat diam, ultricies vel sagittis sit amet, dapibus eget libero. Donec aliquam consectetur dui, ac gravida lectus rutrum eleifend. Nam sed dignissim arcu, vel aliquet orci. Duis luctus justo in massa rutrum dictum. Quisque scelerisque, sapien eget sodales pharetra, diam lectus pulvinar nunc, nec vulputate ligula diam et nulla. Mauris dignissim semper libero, nec condimentum velit pulvinar eget.
Quisque sed congue diam. Praesent eu arcu risus. Quisque ullamcorper vel purus ut convallis. Integer gravida tellus in eros viverra, vel congue justo vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quam enim, mollis a eros feugiat, egestas eleifend mi. Proin sed ultrices nulla. Phasellus augue ipsum, vehicula et tincidunt ut, mattis eget purus. Curabitur aliquet sodales massa, in facilisis est bibendum at.
Etiam consequat sem est. Mauris hendrerit justo a dignissim mattis. Ut a lorem sit amet velit ullamcorper rhoncus non et sapien. Curabitur pharetra ultrices orci eget finibus. Praesent congue, ex ac ullamcorper dictum, est orci tincidunt justo, ut sollicitudin nibh neque vel ex.
Integer purus massa, porttitor et congue in, volutpat sed orci. Cras eu nulla consequat, gravida turpis eget, condimentum diam. Sed at convallis tortor. Phasellus vehicula nisl efficitur venenatis auctor. Mauris congue eu leo sed eleifend. Ut consectetur condimentum libero.
Nullam at mollis leo. Duis scelerisque pharetra enim, non suscipit diam lacinia non. In mattis viverra felis vel fermentum. Quisque ac libero odio. Pellentesque posuere lorem ac tincidunt mattis. Aliquam quis quam at ex congue pharetra vitae mollis nulla.
Duis pellentesque, leo at pulvinar sodales, nibh felis feugiat est, ac congue felis ante non arcu. Etiam vehicula tellus ante, sed finibus sem feugiat vel. Vestibulum vulputate, turpis at facilisis ullamcorper, nulla est dapibus velit, vel hendrerit eros mauris non nisl.
Maecenas sed diam mattis odio porta viverra non sit amet elit. Sed placerat non nulla vitae scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent auctor diam nec sollicitudin feugiat. Pellentesque in dictum lacus. Sed dictum mauris turpis, vel vehicula urna tincidunt vitae. Nullam sed iaculis ipsum. Aliquam bibendum auctor sagittis. Aenean posuere facilisis lectus in dapibus. Morbi iaculis sagittis ante, vulputate faucibus lectus facilisis sed.
Aenean convallis leo vitae lorem gravida convallis. Etiam nisi diam, imperdiet eget quam ac, accumsan molestie libero. Cras blandit ipsum id dapibus porta. Donec vitae dictum magna. Donec felis sapien, sollicitudin vitae condimentum at, sollicitudin eget dui.
Nam ultricies pulvinar est. Ut consectetur tortor vitae nunc iaculis rutrum. Sed quam urna, congue sit amet sollicitudin non, mattis id lectus. Proin tincidunt felis ac gravida tincidunt. Nunc posuere et est ac porta. Donec ultricies vulputate ligula ut eleifend.
Integer at metus tincidunt, tincidunt diam eu, luctus arcu. Sed eu nunc quis tortor rutrum faucibus. Aliquam in leo viverra, ultrices eros eu, vulputate est. Cras rutrum pulvinar venenatis. Etiam ut erat congue, auctor nunc in, convallis massa.
Nunc rutrum nisi sit amet ex sagittis, vitae sagittis nisi tempor. Aliquam vulputate, diam sed elementum commodo, elit nibh dictum dui, sed fringilla lacus leo id nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
Phasellus sit amet felis at ligula finibus gravida quis vel velit. Nulla eget erat iaculis, viverra orci eu, bibendum leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec consectetur finibus blandit. Aliquam erat volutpat. Sed viverra auctor erat, ut luctus sapien auctor eu. Aliquam tempor elit sed leo porttitor, quis imperdiet nulla blandit. Cras id mattis mi. In nunc ex, iaculis nec aliquet et, elementum a mi. Ut ac augue sed justo tincidunt luctus a a massa.
Proin non metus vitae lacus varius blandit id non odio. Morbi pellentesque efficitur convallis. Etiam mattis elit ut nibh rutrum, non fermentum est consectetur. Suspendisse vehicula felis id vulputate sollicitudin. Proin non ex non purus tempor malesuada.
Etiam venenatis sit amet metus at mattis. Proin blandit aliquam eleifend. Phasellus eu dolor a lectus vulputate accumsan. Cras facilisis augue lectus, et iaculis sem faucibus sit amet. Proin elit lorem, vestibulum quis massa ut, tincidunt eleifend lorem. Nullam eget justo ut augue ullamcorper volutpat.
Maecenas vitae lectus sit amet neque pharetra tempor. Nulla ornare eros nibh, id consectetur nunc tempor in. Maecenas dictum, eros vitae lobortis semper, odio ipsum ultrices augue, in luctus augue ligula facilisis lacus. Vestibulum feugiat pretium tellus, eget aliquet eros sodales at. In sodales pulvinar massa tempor viverra.
Donec tincidunt elementum bibendum. Etiam eget erat id dolor ullamcorper venenatis a ac quam. Morbi et rutrum enim, a placerat sem. Integer a porta mi. Donec odio risus, facilisis vitae nunc et, suscipit finibus nisi. Aenean sed posuere ligula. Aenean porta aliquet diam vel cursus. Maecenas eget massa vel libero feugiat euismod. In et posuere metus, porttitor gravida magna.