Ejemplo Sticky o fijar temporalmente un elemento

5 minutos

HTML5 y CSS3

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>

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se paga 1 mes de servidor.
  • 3 cafés: Se cubre 1 mes de Black box.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...