Stickybits es un pequeño complemento de utilidad de JavaScript. Su objetivo es no interponerse en el camino. Hace una cosa bien: ayuda con elementos pegajosos. No depende de otros complementos de JavaScript, se puede importar a través de npm y se acerca a los elementos fijos de una manera muy orientada a la utilidad.
Resolver el problema del elemento pegajoso puede llevar a situaciones pegajosas
Al navegar por sitios, es común ver elementos HTML, como pancartas y navegaciones, adheridos a la parte superior e inferior del navegador. Hay un par de formas en que se puede hacer.
uno, hay position: sticky, una función CSS nativa. Podrías usarlo algo como esto:
header {
position: sticky;
top: -1px;
}MDN lo explica bien:
El posicionamiento pegajoso es un híbrido de posicionamiento relativo y fijo. El elemento se trata con una posición relativa hasta que cruza un umbral especificado, momento en el que se trata con una posición fija.
Dos, esencialmente puedes falsificar ese comportamiento con JavaScript. Mide las posiciones de desplazamiento y voltea el elemento entre position: relative (o estática o cualquier otra cosa) y position: fixed según sea necesario.
Diría que ninguna de estas técnicas es ideal.
Al hacer el cambio usted mismo, puede haber nerviosismo cuando estos elementos pasan de una posición fija a otra. Este problema empeora en los navegadores de dispositivos móviles.
Solo con CSS nativo, no tiene la capacidad de saber cuándo el elemento está en un estado u otro.
Obtenga lo mejor de ambos mundos con StickyBits
Stickybits una alternativa ligera (~2KB) a position: sticky polirellenos. Es un complemento fácil de configurar que es compatible con cualquier otro complemento, biblioteca o marco.
Instalación con npm:
npm i stickybits --save-devO, instalación con Yarn:
yarn add stickybits --devUso:
stickybits('[your-sticky-selector]');Con la solución lista para usar anterior, ahora ha configurado cualquier elemento con su selector para que sea fijo. Esto funcionará para los navegadores que admiten .classList ya sea position: sticky es compatible o no.
Stickybits, con el adicional useStickyClasses: true el conjunto de propiedades agregará sticky y stuck clases cuando los elementos se vuelven pegajosos o atascados. Esto facilita la conexión de estilos CSS en función de cuándo el elemento seleccionado se vuelve estático, pegajoso o atascado. Esta útil utilidad se agregó después de que Dave Rupert la mencionara en Shop Talk Show Podcast.
Stickybits también proporciona propiedades compensadas y un gancho de método de limpieza para ayudar a administrar mejor su estado pegajoso.
Población
Vea el Pen Njwpep de Jeff Wainwright (@yowainwright) en CodePen.
Vea el ejemplo Pen CSS `position: sticky` de Jeff Wainwright (@yowainwright) en CodePen.
Se proporcionan más demostraciones en GitHub.
Conclusión
Stickybits es un complemento de JavaScript para hacer que un elemento HTML se adhiera a la parte superior o inferior de una ventana del navegador dentro de su elemento principal. Con las diferentes implementaciones de position: fixed; y position: sticky; en todos los navegadores, crear funciones adhesivas de alta calidad es un desafío. Stickybits resuelve esto.
Stickybits se inspiró en FixedSticky de Fillament Group, que recientemente dejó de usar su complemento.
Es de código abierto por Dollar Shave Club y nuestro equipo y yo lo mantenemos.