Como fijar elementos con sticky en CSS

¿Que es sticky?

En CSS, la propiedad position: sticky; se utiliza para hacer que un elemento se quede "pegado" en una posición determinada mientras se hace scroll por la página. Este comportamiento es intermedio entre position: relative; y position: fixed;.

Funcionamiento:

• Un elemento con position: sticky; se comporta como un elemento relativamente posicionado (normalmente dentro de su contenedor) hasta que alcanza un umbral (por ejemplo, la parte superior de la ventana gráfica).

• Una vez que se alcanza ese umbral, el elemento se "pega" y permanece fijo en esa posición mientras el usuario sigue desplazándose.

Ejemplo:

1. Creamos el archivo html (index.html) donde agregaremos un cuadro de busqueda y varios div para ocupar espacion.

index.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">
    <link rel="stylesheet" href="estilos.css">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>MemoCode - Pruebas</h1>
    </header>
    <main>
        <div class="buscador">
            <input type="text" placeholder="Buscar contendor">
        </div>
        <div class="contenedores">
            <div class="contenedor">
                <h2>contenedores</h2>
            </div>
            <div class="contenedor">
                <h2>contenedores</h2>
            </div>
            <div class="contenedor">
                <h2>contenedores</h2>
            </div>
            <div class="contenedor">
                <h2>contenedores</h2>
            </div>
            <div class="contenedor">
                <h2>contenedores</h2>
            </div>
            <div class="contenedor">
                <h2>contenedores</h2>
            </div>
            <div class="contenedor">
                <h2>contenedores</h2>
            </div>
            <div class="contenedor">
                <h2>contenedores</h2>
            </div>
            <div class="contenedor">
                <h2>contenedores</h2>
            </div>
            <div class="contenedor">
                <h2>contenedores</h2>
            </div>
            <div class="contenedor">
                <h2>contenedores</h2>
            </div>
            <div class="contenedor">
                <h2>contenedores</h2>
            </div>
    </main>
</body>
</html>

2. creamos un archivo CSS con el nombre estilos.css para agregar los estilos y efectos a la pagina html en donde la clase llamada buscador es donde se aplican los efectos para que se mantenga fijo al desplazarse por la pagina

estilo.css

                    
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

header {
    text-align: center;
}

input {
    width: 250px;
    height: 30px;
    border-radius: 35px;
    text-align: center;
}

.buscador{
    display: grid;
    justify-items: center;
    position: sticky; /* Mantiene el contenedor en una posición fija cuando se hace scroll, pero solo después de que se haya desplazado fuera de la vista */
    top: 0px; /* Fija la posición del elemento en la parte superior de la página cuando se vuelve "sticky" */
    z-index: 0; /* Establece el nivel de apilamiento para controlar la superposición con otros elementos; en este caso, es el más bajo posible */
}

.contenedores {
    display: grid; 
    align-items: center;
    justify-content: center;
    align-content: center;
    justify-items: center;
    grid-template-columns: repeat(3, auto);
    column-gap: 1em;
    row-gap: 1em;
}

.contenedor {
    display: grid;
    align-content: center;
    justify-content: center;
    width: 250px;
    height: 250px;
    background-color: aqua;
}

3. Listo, ejecuta el codigo a tus necesidades y prueba el funcionamiento.

Descargar proyecto