Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
El componente Sticky le permite hacer algo que permanece pegado en la parte superior de la página mientras el usuario se desplaza hacia abajo en la página. Los componentes fijos encuentran su uso en barras laterales, enlaces externos o barras superiores. Agregue la clase .sticky y [ data-sticky ] a un elemento para crear un elemento fijo. Los elementos adhesivos deben envolverse en un contenedor con [ data-sticky-container ], que determina el tamaño y el diseño de la cuadrícula.
Stick to bottom: es una de las variantes de la clase pegajosa . Aquí, los elementos adhesivos se adhieren a la parte inferior a medida que el usuario se desplaza. Para pegar elementos en la parte inferior, agregue la clase .sticky , [ data-sticky ] y, además , [ data-stick-to=”bottom” ] . Si es necesario, puede usar dos puntos de anclaje, es decir, los puntos inicial y final del sticky usando data-top-anchor=”elementID”, data-btm-anchor=” elementID ” para los puntos de anclaje superior e inferior respectivamente.
Foundation CSS Stick to bottom Atributo:
- data-stick-to=”bottom”: este atributo se usa para hacer que el sticky se pegue al fondo.
Sintaxis:
<div class="container-name" data-sticky-container>
<div class="sticky"
data-sticky data-stick-to="bottom"
data-top-anchor="Start_point"
data-btm-anchor="End_Point">
<img class="thumbnail" src="image_source">
</div>
</div>
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Stick to bottom</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body style="padding:2rem 1rem;"> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Foundation CSS Sticky</h3> <div class="row"> <div class="columns small-6" id="example1" data-something> <p id="doodle"> Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. </p> <p> Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. </p> <p> Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. </p> <p> Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. </p> <p> Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. </p> </div> <div class="columns small-6 right" data-sticky-container> <div class="sticky" data-sticky data-anchor="example1" data-stick-to="bottom"> <img class="thumbnail" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Fundación CSS Pegar a la parte inferior
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title> Foundation CSS Stick to bottom</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <h3>Foundation CSS Sticky</h3> <div class="row"> <div class="columns demo-column small-6"> <p> Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. </p> <p> Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. </p> <p> Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. </p> <p id="example2"> <strong> The image to the right will be sticky when it hits the top of this paragraph element. </strong> Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. </p> <p> Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. </p> <p> Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. </p> <p> Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. </p> <p id="foo"> <strong> The image to the right will lose stickiness when it hits the bottom of this paragraph element. </strong> Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. Welcome to GeeksForGeeks. This is an example line. Welcome to GFG.This is an example line. </p> </div> <div class="columns small-6 right" data-sticky-container> <div class="sticky" data-sticky data-stick-to="bottom" data-top-anchor="example2:top" data-btm-anchor="foo:bottom"> <img class="thumbnail" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" /> </div> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Fundación CSS Pegar a la parte inferior
Referencia: https://get.foundation/sites/docs/sticky.html#stick-to-bottom
Publicación traducida automáticamente
Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA