A continuación vamos a aprender a fijar un elemento en el scroll de forma temporal mientras se hace scroll hasta que encuentre otro elemento que choque.
Para lograrlo haremos uso de position: sticky; junto a top, una pareja de propiedades que nos deslizarán el elemento mientras exista espacio. Es como si llenáramos de aceite el padre.
.elemento {
top: 2rem;
position: sticky;
}
Mientras tenga espacio en el padre, podrá fijarse.
Completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo</title>
<style type="text/css" media="screen">
body {
margin: 0;
font-family: arial;
}
code {
color: #89D2DC;
}
.header, .footer {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
background: #6564DB;
color: white;
}
.container {
display: flex;
gap: 2rem;
margin: 0 auto;
max-width: 800px;
}
.aside__slider {
top: 2rem;
position: sticky;
width: 10rem;
margin: 2rem 0;
background-color: #232ed1;
color: white;
padding: 2rem;
}
</style>
</head>
<body>
<header class="header">
<h1 class="titulo">Ejemplo de Sticky</h1>
<p>⬇️ Realiza un scroll hacia abajo ⬇️</p>
</header>
<div class="container">
<aside class="aside">
<div class="aside__slider">
<p>Tengo <code>position: sticky;</code> y <code>top: 2rem;</code></p>
</div>
</aside>
<main class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur assumenda consectetur
corporis culpa dicta fugiat, illo, maiores maxime necessitatibus odit praesentium quaerat quia
repellendus similique sit tempore? Hic, mollitia!</p>
<p>Accusamus aut commodi eaque inventore magnam, magni minus nostrum numquam porro quaerat quidem quod
tenetur, totam! Alias consequuntur cum deleniti dolore doloribus error expedita iusto possimus quaerat
voluptas! Qui, velit.</p>
<p>Architecto aut fugit nesciunt perspiciatis voluptatibus. A accusantium at consequatur ea eos excepturi id
illo ipsam molestias praesentium provident quasi quibusdam quo reiciendis repellat, repellendus sequi
totam vero. Illo, vero.</p>
<p>Deleniti dolores error eveniet hic illo impedit labore laborum minima. Accusamus accusantium asperiores
consequuntur debitis deserunt, dicta doloremque ducimus eligendi esse magnam modi, nam obcaecati optio
quibusdam rerum suscipit temporibus?</p>
<p>Alias aut, commodi distinctio hic magni nam nemo, nulla numquam placeat porro quasi quis rem similique
soluta sunt voluptates, voluptatibus! Aliquid asperiores beatae eaque libero nostrum quasi quos sit
suscipit.</p>
<p>Ab ad aperiam consequatur cum deserunt ea eos facere harum id impedit incidunt ipsam ipsum necessitatibus
optio quis quod, repudiandae sapiente tempora voluptates voluptatum. Blanditiis cumque est fugit
perferendis sint?</p>
<p>A amet atque commodi delectus, distinctio dolor dolore dolores doloribus eos ex hic illum ipsam magni
minima molestiae nemo nihil non numquam obcaecati officiis pariatur quaerat, quam quia veniam
veritatis.</p>
<p>Aliquid, amet animi consectetur dignissimos eligendi est eveniet expedita fugiat id neque pariatur qui
quia quibusdam, reprehenderit saepe similique totam! Accusantium cum eius eveniet iure obcaecati ratione
recusandae saepe temporibus?</p>
<p>A, autem consequuntur culpa debitis doloribus nesciunt odio perspiciatis rerum sed sit temporibus velit?
Aspernatur corporis dolorem ducimus, eveniet fugiat hic impedit laudantium necessitatibus officia, quas
recusandae similique, veritatis vero.</p>
<p>A accusantium architecto, asperiores cum delectus, deleniti dignissimos dolorum esse eveniet expedita
facilis laborum modi necessitatibus obcaecati officiis qui quisquam quo sequi ullam voluptatum. Debitis
dolores doloribus et ex laborum!</p>
<p>At cupiditate debitis, dolorem ex modi nulla quos totam ut velit vitae. Ad culpa debitis distinctio, enim
eos exercitationem, illo illum nobis odio quisquam quos ratione reiciendis tempora veniam
voluptates?</p>
<p>A accusamus culpa nobis perferendis reprehenderit? Deserunt dolor expedita, in magni maiores maxime
perferendis qui temporibus voluptatem voluptates? Aspernatur ea quasi voluptatum. Consectetur
consequuntur dolorem doloribus esse possimus qui, temporibus.</p>
<p>Beatae culpa cum debitis deleniti dolor doloribus dolorum ea eum facere, hic illo labore laboriosam
placeat, quibusdam rerum tempora ut. Explicabo iste laboriosam natus neque nulla officiis placeat porro
rerum?</p>
<p>Adipisci aperiam asperiores aspernatur dicta dolore doloremque doloribus earum eveniet excepturi expedita
illum iusto molestiae officiis quidem quisquam recusandae sapiente suscipit, tenetur vitae voluptatum!
Doloremque earum est eveniet laudantium nostrum.</p>
<p>Alias, consequatur earum, harum illo ipsa neque numquam optio quaerat qui quibusdam reprehenderit sint
totam! Ad culpa cum delectus doloribus eligendi id nesciunt odio quos ut veniam? Commodi, libero
sed.</p>
<p>Ad aperiam consequatur cupiditate dignissimos dolores, enim excepturi facere fuga illum iure maxime
mollitia nesciunt numquam omnis optio perspiciatis quam quia quis rem repellendus similique, tempore
temporibus totam vel, velit.</p>
<p>Assumenda aut deleniti est exercitationem illo iste itaque, libero minima numquam, officia quaerat sed
sit, tenetur. Adipisci deleniti dolorum earum impedit magni, minima odio officiis quibusdam quis? Omnis,
sit temporibus!</p>
<p>Culpa eius enim error id in magni modi? Aperiam deserunt ea id ipsa iure ut voluptatibus. Aspernatur
atque consequuntur, esse eveniet excepturi inventore iusto necessitatibus odit omnis provident soluta
veniam!</p>
<p>A accusamus, blanditiis commodi consequatur debitis dolorum ducimus ipsum iure iusto labore laborum
laudantium molestiae natus necessitatibus nemo nihil nulla odio placeat quaerat quasi repudiandae sit
soluta suscipit velit voluptatum.</p>
<p>Amet dolorum in magni nemo odio porro quae soluta tempora, voluptas? Commodi ea illo quia? Ab labore
quaerat quod sit ut! Aliquam consequuntur eius fugiat molestiae placeat! Adipisci, architecto,
repellat.</p>
<p>Amet beatae consequuntur deleniti dolor dolore et hic illo ipsam ipsum maiores nihil nisi nostrum numquam
odit omnis, quam qui quibusdam recusandae reiciendis rem repellat repudiandae sequi sunt temporibus
voluptatem!</p>
<p>Aut beatae consequatur doloremque ea eligendi error facere ipsum laboriosam magni minus nam, natus nihil
non, numquam, pariatur possimus quidem rem sunt voluptate voluptatum! Ab officiis sapiente voluptatibus.
Esse, necessitatibus?</p>
<p>Asperiores dicta iure soluta voluptates. Alias cumque deleniti dignissimos doloremque ea eligendi ex
exercitationem facere impedit magni molestiae mollitia possimus quas, ratione reiciendis repellendus
repudiandae suscipit tempora velit voluptatem. Dolorum.</p>
<p>Deleniti doloribus fuga laborum nemo quae reiciendis rerum, sunt veniam. Consequatur, cumque cupiditate
earum illum iure molestiae perferendis provident reiciendis. Animi enim impedit ipsum iste quasi. Animi
ea repellendus saepe!</p>
<p>Culpa dolorum et pariatur quas, quos sit. Aliquid atque debitis dignissimos enim sequi? Ad, molestiae
sapiente! Cum distinctio dolorem ducimus laboriosam magnam necessitatibus nemo odit optio quibusdam
sint. Alias, pariatur.</p>
<p>Atque, commodi dolores eos iure neque possimus quo reprehenderit soluta vel veniam. At commodi cupiditate
eius eos eveniet illo impedit necessitatibus nesciunt, officia pariatur perspiciatis quos sequi suscipit
tempore vero!</p>
<p>Accusamus consectetur debitis dignissimos ea eius eos harum in inventore, ipsam labore maxime modi
molestiae, nesciunt odio perferendis porro sapiente sint soluta suscipit tempore vel veritatis
voluptatum. Consectetur, exercitationem, odio.</p>
<p>Accusamus dolorem facere fugiat praesentium quisquam reiciendis tempora vitae. Deserunt dolores error
facere iste laudantium officiis pariatur quam quod! Aliquid delectus, doloribus eaque fugiat natus nisi
vel? Excepturi, quisquam, veniam!</p>
<p>Accusamus accusantium alias at consequuntur debitis dicta dolor dolorem ducimus eaque eos esse, facere
fuga hic libero necessitatibus numquam odio omnis praesentium quaerat quas suscipit unde vel veniam,
voluptas voluptatum?</p>
<p>Consequatur cumque dolorem ducimus nihil repudiandae? Alias aliquam consequatur dignissimos dolor
doloremque eos expedita facilis, illo impedit labore nesciunt officia, quae quia ratione sapiente! Autem
error eum obcaecati sed sit.</p>
</main>
</div>
<footer class="footer">
Eso es todo amigos
</footer>
</body>
</html>
{{ comments.length }} comentarios