Indicador de profundidad de desplazamiento CSS puro
| Autor: | MadeByMike |
|---|---|
| Views Total: | 3,425 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 15, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Una solución CSS pura para crear una barra de progreso de cabecera fija que indica hasta dónde se ha desplazado. Alimentado por < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/@supports" target = "_ blank" > @supports regla de CSS.
Vista prévia
Cree el encabezado fijo.
<header> <h1>Scroll Indicator</h1> </header>
header {
position: fixed;
top: 0;
height: 125px;
width: 100%;
background: white;
}
header {
padding: 10px 10%;
box-sizing: border-box;
} Agregue el contenido principal al elemento principal como sigue:
<main> ... </main>
main {
margin-top: 128px;
}
main {
padding: 10px 10%;
box-sizing: border-box;
} El CSS principal para calcular la posición de desplazamiento y actualizar la barra de desplazamiento en el desplazamiento de página.
@supports (height: 100vh) {
body {
background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
background-size: 100% calc(100% - 100vh + 129px);
background-repeat: no-repeat;
}
body:before {
content: '';
position: fixed;
top: 128px;
bottom: 0;
width: 100%;
z-index: -1;
background: white;
}
}
