html
复制代码
<!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>
main {
padding: 32px;
}
/* 标题滚动动画 */
.title {
color: #000;
text-align: center;
padding: 16px;
margin: 0;
width: 100%;
position: sticky;
top: 0;
left: 0;
animation: enhance-header linear both;
animation-timeline: scroll(root block);
/* 这个100px 代表滚动多少时触发动画 */
animation-range: 0 100px;
}
@keyframes enhance-header {
to {
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5px);
font-size: 18px;
color: #000;
}
}
/* 进度条 */
#progress {
position: fixed;
top: 0;
width: 0%;
background-color: red;
height: 1rem;
animation: progress-grow auto linear;
animation-timeline: scroll(root block);
}
@keyframes progress-grow {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.nianxing {
position: sticky;
top: 50px;
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<!-- 进度条 -->
<div id="progress"></div>
<main>
<h1 class="title">标题来了</h1>
</h1>
<!-- 输入lorem 随机生成大量文字 -->
<h1>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit unde explicabo consequatur impedit inventore
assumenda nulla accusamus dolores, est debitis enim quod rem quas, cupiditate nesciunt provident repellendus natus
reprehenderit!</h1>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet natus fuga dignissimos dolorem facilis labore
ex, deserunt est, ullam nihil neque perspiciatis voluptatibus quia consequuntur minima explicabo, a sunt sint.
</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid est exercitationem sunt voluptates
necessitatibus, magnam deserunt iure expedita. Eum minus distinctio rerum libero repellat beatae quam atque sint
quo quasi?
Nihil, quibusdam. Facere ut doloremque quisquam provident quo, animi sapiente, perferendis debitis voluptates
ratione dolor necessitatibus placeat eum, omnis asperiores aliquid unde deserunt voluptas dicta illum assumenda
eius nobis id.
Incidunt ab, molestias voluptas quisquam excepturi labore optio vero molestiae, soluta iste quia officiis,
consequatur quas ullam quis qui dolores explicabo illum possimus autem fugiat facilis atque tempore. Assumenda,
nesciunt.
Voluptatum placeat, iste facere ratione, autem eos commodi rem doloremque in quis eius natus sapiente, obcaecati
vero. Vole molestias modi saepe expedita voluptates dolorum. Alias.</p>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis tenetur vitae quam commodi fugiat repellendus
dolorum assumenda vero dicta, eos veniam illo voluptates et quia possimus omnis! Assumenda, voluptatem nesciunt?
</h2>
<div class="nianxing">
粘性定位
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed neque eum culpa at cupiditate. Minima molestiae
iusto optio excepturi architecto eos minus eligendi, aspernatur quae! Ea quidem fugiat neque quaerat?
Nesciunt nulla ipsam nobis beatae, tempore iusto soluta. Quaerat nemo incidunt ex, animi cupiditate dicta
excepturi et a reiciendis distinctio impedit corporis voluptatibus eum, aliquam ipsum totam quidem alias tempora?
</p>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde a saepe ratione eveniet cupiditate, explicabo fuga
qui aperiam porro veniam dignissimos maxime optio totam facere! Maiores, repudiandae illo. Fugiat, earum.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis libero nobis quidem at id nisi ipsam
consequuntur, voluptas temporibus officiis alias velit ipsum rerum totam tempora est ducimus optio!
Accusantium eum voluptates asperiores dignissimos vel illo tempora consequatur odio, quia vero perspiciatis?
Dolores rerum eius nulla et atque voluptates, ex dicta excepturi accusamus magnam possimus. Facilis provident
accusamus vitae.
Ipsum ea nesciunt animi illo illum cumque, eaque aliquam numquam sapiente officiis reiciendis sunt deleniti
officia quo eum voluptates iure nostrum temporibus. Eaque quidem iste molestias nihil, reiciendis a dolorem!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam excepturi incidunt facilis error voluptatum
natus laboriosam vel dignissimos quae eaque ut, quos quo molestiae dolorem sint aperiam delectus maiores
consequuntur.
Sapiente nostrum eum vitae quidem consectetur dolorem hic modi accusamus asperiores blanditiis minus, sit, illo
veritatis, omnis suscipit repellat magni ad. Harum, illo. Laborum et, quas iure officiis perspiciatis quam.
Odit minima suscipit sapiente, asperiores eaque perspiciatis qui rerum laborum quam, quibusdam laudantium labore
provident. At illo quisquam, ipsam dolore, obcaecati maiores excepturi nostrum beatae fugit sint iure omnis nulla!
Itaque in ex pariatur vitae atque, deleniti distinctio minima reiciendis odit cupiditate voluptate vero ratione
minus voluptatem! Facilis, veniam quis quas assumenda qui nemo similique doloribus dicta hic quae aut.
Ab quas et odit natus consectetur animi consequatur assumenda ratione error repudiandae molestias, est, voluptatem
aut magni quasi. Nemo, soluta architecto. Assumenda veniam dolor earum vero facilis est eum adipisci.
Culpa est magni, omnis doloremque aut ullam vero, architecto dolorem quas voluptatibus ut corporis sint dolore?
Dolore accusamus tempore magni quasi autem praesentium dolorum illo illum! Aspernatur voluptate officia dolor.
Harum nostrum, sapiente officia nam explicabo eos quod voluptatum, amet sequi aut voluptate natus laboriosam esse!
Ab fugiat non architecto adipisci hic cupiditate rerum voluptas, quibusdam neque provident accusamus asperiores.
Ut id nobis quibusdam et labore maxime incidunt aperiam velit rem, nam quo corrupti, libero voluptas esse nostrum
a. Nemo cum ullam obcaecati accusamus ex ipsa consequuntur optio dolores. Ab.
Ut harum possimus, excepturi repellendus nemo temporibus obcaecati aspernatur soluta vitae, iste cumque aliquid
impedit sint inventore quae tempore reiciendis dolorem voluptate consequatur praesentium! Reiciendis velit tempore
iusto deleniti quia?
Delectus molestias reiciendis iste quibusdam ratione fuga nemo possimus consectetur voluptatibus id eum
exercitationem distinctio suscipit veritatis nam, error neque perspiciatis molestiae optio, quidem voluptate
voluptatem. Quis facere veniam voluptatibus!
Itaque id repudiandae nihil consectetur quasi harum, eius neque laborum accusamus fugit expedita, alias dolorum
architecto libero velit consequuntur eum reprehenderit sint ea incidunt autem nisi omnis! Omnis, perspiciatis
iure.
Aperiam omnis architecto sunt asperiores modi, eveniet commodi nostrum laboriosam corporis tempora illum deserunt
iste ducimus magni neque eaque ratione iusto voluptate error fugiat ea a nobis cumque quam? Autem.
Accusamus, veritatis a sint enim, reprehenderit voluptatibus maxime blanditiis ipsa autem distinctio dolorem
doloremque voluptas delectus minima quam. Veritatis dolorem tenetur temporibus amet quos rerum non nulla fugit
consectetur blanditiis?
Tempore nostrum minus aperiam id labore corrupti exercitationem architecto, sint provident accusantium distinctio
suscipit commodi repudiandae voluptatibus cum quibusdam itaque consequatur, quam tempora quos. Porro eaque aperiam
blanditiis omnis soluta!
Ad id a magni reprehenderit blanditiis perferendis, sit in, laborum suscipit voluptatum ipsa iure eligendi maiores
voluptatem quidem ducimus, distinctio totam? Minus ea placeat quod quo molestiae cupiditate nemo ad.
Impedit autem ullam minus recusandae rem voluptas optio natus saepe dignissimos, ratione, nam atque, repellendus
inventore dolore magnam cupiditate ut harum quaerat molestiae aut quis ducimus. Esse perspiciatis inventore fugit?
Accusamus, facere. Perferendis reprehenderit dignissimos adipisci, deserunt temporibus laudantium rem culpa
accusamus quos? At provident odit eius optio ducimus cumque, consequatur maxime vero quaerat suscipit blanditiis,
assumenda impedit nihil vitae.
Totam beatae vitae id vero placeat vel error? Officia, sapiente totam? Tempora, dolor autem laudantium modi
praesentium enim, ipsam dolorum doloribus, excepturi repellat similique dolore! Odit dignissimos repellat
molestias fuga?
Obcaecati ullam, facilis perferendis velit asperiores quam! Et perferendis soluta sunt laudantium numquam nesciunt
saepe repellendus aliquam, quibusdam, eos earum deleniti eveniet. Odit, illum architecto. Libero ipsum voluptas
velit unde.
Enim officiis numquam minus a? Alias ex placeat voluptatum mollitia necessitatibus neque iste quidem doloribus
nesciunt voluptate. Alias, tenetur unde. Quidem soluta ea, dolore sit odio aspernatur nisi repudiandae adipisci?
Veniam, quasi. Magnam delectus blanditiis, dolorum dignissimos ea animi quam laborum sunt earum dolore
reprehenderit! Repudiandae aspernatur quidem eum exercitationem sequi explicabo praesentium voluptates molestias,
inventore suscipit fugit necessitatibus sunt!
Magni ex facilis velit amet laboriosam eius ab cumque ipsa aliquam. Rerum, molestiae exercitationem praesentium et
iure recusandae animi sit possimus quasi incidunt inventore ex velit adipisci, debitis cum sequi.
Ab itaque quia mollitia voluptatibus quibusdam necessitatibus omnis nihil vel ducimus delectus, molestiae quidem,
voluptate asperiores. Odio molestiae neque sapiente itaque dolore quo sed libero minus magni sunt, corporis sint.
Voluptates blanditiis suscipit iusto magnam expedita maxime repudiandae autem nihil perferendis natus hic, quia
obcaecati voluptatum, totam quaerat consectetur perspiciatis beatae, unde dolore officiis impedit. Quam aspernatur
esse iure at.
Nemo harum eum dolorum culpa nesciunt, veritatis rerum, omnis itaque minus officiis saepe ducimus consequuntur
totam sequi nisi molestias libero dignissimos reprehenderit animi quaerat. Voluptatem expedita fugiat hic sequi
velit.
Minima veritatis molestias aspernatur accusantium et. Atque commodi itaque illo quisquam, expedita nobis, optio,
blanditiis tempora illum accusantium eveniet error inventore. At repellat officiis, ipsum rem beatae sequi tempore
voluptate?
Labore blanditiis necessitatibus, magni praesentium itaque ipsa harum provident nesciunt distinctio laudantium
esse ab quae modi minima illo possimus, totam eligendi at dolorum quam vero reiciendis aspernatur. Ipsam, facilis
consequatur.
Blanditiis quod commodi eligendi accusantium ad culpa nisi similique provident voluptatem ducimus, libero hic
atque, rerum nihil velit quasi? Nostrum, excepturi! Ipsum, atque sint ea minima illo praesentium asperiores
ratione.
Earum nulla facere quisquam error quia possimus asperiores sequi beatae ipsam, recusandae explicabo consequuntur
esse cupiditate id hic quam doloribus excepturi perspiciatis iure dicta nisi ab. Reiciendis tenetur hic quos.
Cumque nihil, optio officia odit magnam nam quis numquam, qui alias dolore incidunt sed. Ab architecto, est nobis
praesentium commodi beatae numquam exercitationem illum, eveniet eum similique consequatur culpa atque.</p>
</main>
</body>
</html>