I am working on ReactJS ,I have three Scrollable content and I want to fix title for each section of the title eg:- There are movies so I want to fix title Movie and all content should scroll then if the movies completes then the Title should too move with the scroll
1 Answers
You can just use position: sticky and top: 0 for your headers.
For multiple headers use z-index property to stack one over the other
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:sans-serif;
}
header {
background-color: #7a7a7a;
position: sticky;
top: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:sans-serif;
}
header {
background-color: #7a7a7a;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<header><h1>HEADING 1</h1></header>
<article>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa libero
assumenda fuga mollitia fugit minus aliquam in, quod perferendis sequi
nulla, autem ipsum ullam cum, vel tempore dolorum obcaecati ut.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid
veritatis repellendus ex, autem nulla mollitia ab repudiandae earum hic
assumenda facilis? Nam perferendis iste nihil tempora iure animi at
illum! Culpa aspernatur architecto eos minus aut adipisci odio
voluptatibus dicta, labore nobis doloribus tempore quis enim minima
laborum velit assumenda delectus libero consequatur vero commodi!
Quaerat dolorem molestiae corrupti aut. Magni, aliquid ipsum, debitis
placeat voluptatem eos nisi et esse dicta nam corrupti tempore cumque
necessitatibus libero! Laudantium aliquid, facilis ut explicabo eligendi
praesentium accusamus, dolorum iure, ab sit officia. Praesentium minus
exercitationem nemo unde non corporis ipsum neque labore dolores commodi
amet alias tempora odio aperiam in quia quo, quod mollitia repellat
excepturi impedit! Ex rem suscipit temporibus quaerat. Perferendis
beatae facilis quaerat illum ex, pariatur maiores ipsa in, iste ullam
itaque excepturi consequatur. Excepturi nisi, consequuntur, esse saepe,
exercitationem nihil blanditiis totam laboriosam explicabo quis
inventore praesentium deserunt. Qui, impedit vitae, earum veritatis
delectus est excepturi veniam commodi consequuntur temporibus quia at ad
nisi eaque odio reiciendis reprehenderit consectetur exercitationem in
perspiciatis tempore, culpa quisquam cumque dolor! Nulla! Distinctio
voluptatum blanditiis molestias laudantium veritatis sint beatae?
Explicabo accusantium at omnis qui cumque quas temporibus modi, porro
perspiciatis totam ut dolores cupiditate ullam in deserunt dolore quasi.
Officiis, eaque! Labore provident tempore sunt at. Pariatur amet eius
odio, labore numquam, laboriosam magni ipsa porro deleniti quas ipsam
quo vero. Aut reprehenderit perspiciatis culpa voluptas maiores placeat
dolores, laborum aspernatur. Voluptatibus assumenda impedit vel in
nostrum quas rem reprehenderit! Est expedita eligendi distinctio
recusandae autem repellendus nam quia modi velit soluta laborum quisquam
officia, quis fugit saepe. Magnam, similique quos. Sequi aliquid
blanditiis itaque corrupti pariatur dolorem nemo debitis, veniam,
voluptatem fugiat quis obcaecati qui assumenda molestiae, iusto tempore
aperiam accusantium nostrum enim impedit alias minus! Numquam molestiae
pariatur illum. Atque doloremque saepe voluptate, nisi rem aliquam iste
architecto, dolorem recusandae consequatur suscipit laudantium mollitia
libero incidunt, alias laborum? Quam nostrum quidem magni ab voluptas
earum eum quo assumenda est? Deserunt impedit porro aut dolore
necessitatibus possimus voluptate non libero error vel ab, nesciunt
consequatur beatae minus ea doloribus assumenda cumque perferendis esse
culpa. Quisquam aut distinctio qui molestias. Dolore. Quisquam corporis
iusto ullam error molestiae delectus, doloremque saepe hic qui minus
optio obcaecati sed repellendus. Voluptatibus ex perspiciatis veritatis
ipsa quisquam? Ad id, tempore totam reiciendis voluptatem magnam porro.
Deleniti minima, aliquid voluptatem voluptatibus officia possimus iste
repellat accusantium neque laborum quisquam distinctio maiores ex
quaerat, necessitatibus, suscipit natus nobis ducimus! Laboriosam
deserunt odit odio delectus expedita enim ea? Sapiente, quisquam nobis,
tenetur autem vitae accusamus praesentium nisi dolorem placeat culpa
quia quaerat cupiditate quas, ab consequuntur optio amet hic et.
Suscipit, molestias nulla? Tenetur deleniti fugit amet nemo! Quas
praesentium ipsum harum deleniti nisi hic, at saepe eaque repellendus
repudiandae neque perspiciatis a ipsa maxime commodi veniam iure
nesciunt assumenda, perferendis placeat alias eligendi. Qui ea tempora
eligendi. Totam adipisci iste nihil in sequi quas libero, corporis neque
culpa voluptas quaerat temporibus consequatur, iure aliquam voluptate
impedit repudiandae pariatur nam fuga alias! Fugit corporis magni quis
ut dignissimos! Sunt, hic tenetur, autem assumenda quae rem facilis
asperiores itaque omnis similique laborum eos dignissimos vel in alias,
accusamus iste nesciunt reiciendis? Consequuntur enim, illum facilis
similique nobis officia est. Laboriosam ducimus illum possimus,
provident quis fugit blanditiis ex odit mollitia? Perspiciatis,
sapiente, laudantium quas officia eaque tenetur, unde ab praesentium
labore perferendis ullam expedita minima veniam voluptas itaque
incidunt. Voluptatum ad, dolorem velit optio repudiandae quasi voluptate
obcaecati enim architecto quam laboriosam vitae. Quod, inventore! Animi
perferendis natus veniam vero, omnis porro doloribus fugit, sequi
reprehenderit itaque, deserunt nemo!
labore perferendis ullam expedita minima veniam voluptas itaque
incidunt. Voluptatum ad, dolorem velit optio repudiandae quasi voluptate
obcaecati enim architecto quam laboriosam vitae. Quod, inventore! Animi
perferendis natus veniam vero, omnis porro doloribus fugit, sequi
reprehenderit itaque, deserunt nemo!
</p>
</article>
<header><h1>HEADING 2</h1></header>
<article>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates
fugiat rem omnis magnam impedit, veritatis expedita doloremque vel
tempora architecto, eius deserunt voluptate doloribus saepe quos?
Laboriosam iure nam odio? Molestiae iste, quasi delectus deleniti fuga
ratione temporibus itaque ad ipsum tempora asperiores, eveniet corporis
voluptates nemo explicabo. Ad perspiciatis autem, non quaerat saepe
deserunt beatae vel esse neque nihil? Omnis ducimus placeat unde dolore
repellendus asperiores animi impedit dolor repellat error inventore quia
hic sint dignissimos laudantium modi fugiat explicabo, possimus
perferendis ipsum cumque tempore quos mollitia! Illo, vel. Consequuntur,
necessitatibus officiis dolores sit reprehenderit praesentium sint
maxime dolore maiores distinctio eveniet aut ullam vitae, laboriosam nam
quibusdam explicabo repudiandae possimus. Ipsum neque porro eum
quibusdam corrupti reprehenderit est? Consectetur sequi sunt nam enim
aperiam, labore commodi. Minima asperiores facere soluta, eius molestiae
voluptas ea doloremque exercitationem laboriosam, veniam consectetur!
Unde necessitatibus dolore facilis ut cum quis beatae tempora? Tenetur
at adipisci optio delectus ab laudantium dolorem ipsa error, soluta,
aperiam explicabo! Nulla cumque dolorum facere deleniti et accusamus
quisquam reprehenderit voluptatibus assumenda perferendis doloribus
fuga, quasi aliquid quas. Provident aliquid tempore modi labore! Quos
fugiat unde placeat? Animi esse excepturi sunt illum, voluptate,
deleniti obcaecati nam eius laboriosam natus expedita, atque voluptates
soluta? Maxime obcaecati quae ullam ut. Perferendis, tempore! Repellat,
cupiditate. Deleniti non expedita officiis exercitationem est aperiam
odio error consequuntur, nam suscipit libero tempora, aliquid
architecto, numquam quod? Ullam explicabo fuga possimus quas molestias
earum nihil? Blanditiis cum accusantium fugit quae, expedita nam
praesentium ullam ea minus suscipit dolores pariatur atque voluptates
velit illum, esse culpa architecto. Dignissimos repudiandae recusandae
ipsam, fugiat a laudantium sed fuga? Labore soluta explicabo quisquam,
fuga voluptatum dolorem? Qui obcaecati amet consectetur vel, ea fugiat
facilis? Quo cupiditate, hic, dolorem eius assumenda quisquam illo
libero voluptates vel eum commodi. Blanditiis, amet? Veniam pariatur
repudiandae totam consequuntur doloremque odit at quo officia, nulla
debitis obcaecati in harum alias esse, libero eligendi. Quo explicabo
iusto consequatur. Provident alias explicabo est recusandae architecto
aliquid. Ea placeat possimus blanditiis, commodi exercitationem repellat
earum perferendis vel nemo, fugit labore atque quisquam impedit, fugiat
deserunt. Dolorem ipsam vero nostrum tenetur sapiente provident sequi
praesentium hic, vel atque. Neque rem eos architecto! Ullam dolore,
sequi a molestiae at modi earum ratione! Natus, enim saepe vero veniam
deleniti laborum temporibus nostrum voluptatem ipsa eveniet vel! Quos
illum ipsum laboriosam? Quibusdam aliquam autem officia sequi ratione in
eius rerum numquam! Consequuntur corrupti, nisi deleniti aspernatur
iure, blanditiis doloribus dicta ab sed, tempora omnis perferendis
ratione quis nihil magnam dolorum nostrum! Nesciunt consectetur ipsa
incidunt atque sunt rerum quae quidem fugit veniam perspiciatis. Iure,
nihil? Vel molestiae asperiores soluta totam repudiandae nisi vero,
dicta repellat exercitationem facilis temporibus, officia itaque ipsum?
Magnam autem quibusdam esse nisi, cumque quaerat aspernatur accusantium
labore doloremque voluptates sint maxime odit sit illo, tempora pariatur
hic dignissimos sunt assumenda ratione? Eum, possimus. Labore inventore
facere ratione? Explicabo blanditiis necessitatibus odit rerum eveniet
beatae! Qui sunt beatae at perferendis debitis? Sapiente pariatur
aliquam tempora, laboriosam hic labore quisquam ipsam. Nesciunt mollitia
harum nemo dicta at omnis voluptatum! Atque nihil, culpa veniam in dicta
eius sed ex molestiae, maxime incidunt, deserunt hic accusamus aperiam
earum? Ducimus, dicta minima nam mollitia enim et molestias est nulla,
in, amet veritatis! Quos pariatur itaque a, saepe libero eaque tempore.
In nulla vitae obcaecati eaque nemo autem asperiores, laborum quam harum
error molestiae aperiam, id ab quasi, debitis unde eius. Doloribus,
corrupti! Ab adipisci aperiam veritatis deserunt autem fugiat quod
quaerat ipsam optio, asperiores ipsum provident? Voluptatem excepturi
labore eaque nisi veritatis dolores quos provident odio dolorum optio,
recusandae ipsa quasi sequi.
</p>
</article>
<header><h1>HEADING 3</h1></header>
<article>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat
ducimus nemo iste, minus debitis architecto, neque assumenda corrupti
sint rerum recusandae? Voluptas provident obcaecati harum quis enim
dolor necessitatibus velit? Sint assumenda deleniti, ipsum expedita iste
explicabo, sed alias accusantium quas ad similique impedit perferendis?
Possimus molestiae amet a, commodi quidem consequuntur, autem voluptatem
provident, praesentium dolores dignissimos perferendis quas. Id dicta
explicabo reprehenderit. Consequuntur magnam nobis, error modi molestias
nihil assumenda quidem dignissimos reprehenderit aliquid iste ab
asperiores tempora vero recusandae omnis vitae eaque atque doloribus!
Itaque, nisi voluptate. Ducimus, nostrum dolore repellat autem magnam ex
nihil. Repellat perspiciatis nostrum velit. Odio, aperiam quasi. Non eos
animi, inventore perferendis sint, dolorem tempore porro in adipisci
dolores aliquam, totam iure? Modi adipisci quia eveniet quos id, hic
esse. Fuga necessitatibus fugit sit rem enim! Vel, in laudantium.
Obcaecati maxime delectus praesentium dolor, ea quos harum voluptas
illum, debitis commodi iusto. Molestiae voluptate, est ipsam, optio
dolores obcaecati aut modi sapiente laudantium, molestias minus laborum
ea. Cumque culpa ratione qui nostrum incidunt nemo error aspernatur,
doloribus dolorum minima reprehenderit obcaecati amet. Quasi repellendus
exercitationem magnam laudantium pariatur autem nihil deleniti. Esse
perferendis eligendi vero nam voluptatibus sapiente est ab. Ab numquam
voluptas velit nobis esse reiciendis omnis adipisci veniam beatae
corrupti? Nostrum vero minima sit nisi labore obcaecati. Nam odit dolore
reprehenderit rem labore dolorem laborum excepturi explicabo maxime,
beatae debitis facilis asperiores quibusdam necessitatibus nostrum
perspiciatis nihil hic sit illum! Sed ipsum asperiores distinctio
ratione culpa, et perspiciatis provident, mollitia quam in quis quaerat
ducimus! Saepe accusamus debitis dolor quo beatae, atque esse doloribus
perspiciatis culpa et? Quasi, aliquam. Dolores. Quam optio voluptate
delectus recusandae ipsam dicta iusto debitis. Odio eius cupiditate
aperiam quod ea asperiores hic. Perspiciatis voluptatum nemo dicta
inventore, iusto quod sunt reprehenderit aperiam exercitationem,
officiis quisquam. Neque vitae ipsam ad nihil quisquam quidem excepturi,
blanditiis dolor tenetur ullam aliquid molestias perferendis odit vero
placeat iusto minima reprehenderit quod laborum dignissimos explicabo
minus ut fugit? Officia, omnis. Voluptatibus id accusamus aspernatur
eaque laudantium sunt quisquam nulla doloribus, suscipit autem, corrupti
minima consectetur obcaecati? Libero, doloribus illum animi fugiat
tenetur ipsa id magnam vitae aliquam vel quod repellendus! Ex sunt
assumenda exercitationem esse ipsum nihil molestiae. Eligendi non at ex
facere veniam, dolore autem necessitatibus sint nostrum repellat
voluptatibus fugiat expedita dolor cumque alias, blanditiis, dolorem
exercitationem pariatur! Eum, impedit, atque, quod placeat vel vero ex
doloremque harum odit porro reiciendis repellat. Natus, molestiae atque
similique, cumque, reiciendis quibusdam recusandae totam incidunt quas
architecto optio vero nulla autem! Ad quibusdam non itaque velit ab
doloremque ducimus autem iure, nam, sequi at illo commodi, vitae
excepturi quam molestias officia laboriosam architecto unde amet vero id
veniam voluptatem doloribus? Soluta. Itaque vitae sequi temporibus
quisquam dolorum magni perferendis fugit, quaerat sit earum ut, autem,
pariatur voluptate deleniti maxime quasi odit dolor voluptatem tenetur
expedita! Voluptatum quos laboriosam fuga beatae sequi. Ipsa molestias
quaerat hic, soluta quae adipisci maxime exercitationem autem tempore
labore. Distinctio culpa quis placeat veniam ducimus! Aliquam, cum.
Deserunt iure consectetur facere reprehenderit ducimus nam quas
voluptate ad. Nam, saepe quod natus asperiores consequatur iure nobis
exercitationem recusandae, omnis quas quisquam debitis at sapiente
cumque! Rerum voluptates maxime corrupti! Voluptatem suscipit quas
officia molestiae, quasi nostrum voluptate distinctio? Molestias
veritatis nisi minus voluptatibus incidunt porro culpa eum perferendis
ipsam voluptates velit qui deserunt, reprehenderit quos tempora sunt
officiis ex laboriosam optio veniam! Sunt excepturi quidem ad delectus
tenetur. Ullam enim minima mollitia sequi eaque officiis deleniti est,
temporibus voluptate fugiat illum magni, quisquam labore aut, quidem
dicta numquam similique. Expedita aperiam ullam beatae assumenda
mollitia voluptates, nulla sed. temporibus voluptate fugiat illum magni, quisquam labore aut, quidem
dicta numquam similique. Expedita aperiam ullam beatae assumenda
mollitia voluptates, nulla sed.
</p>
</article>
</body>
</html>Related