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. Estos componentes se pueden utilizar para hacer las barras laterales, los enlaces externos o las barras superiores. La clase .sticky y el atributo [ data-sticky ] se usan con un elemento para crear un elemento fijo. Los elementos adhesivos deben envolverse en un contenedor con el atributo [ data-sticky-container ], que determina el tamaño y el diseño de la cuadrícula.
Sintaxis :
<div class="Container-Name" data-sticky-container>
<div class="sticky" data-sticky data-margin-top="value">
<img class="thumbnail" src="image_source">
</div>
</div>
Componentes pegajosos:
- Básico : este componente se puede usar para crear algo que se adhiera, especificando la clase .sticky y el atributo [data-sticky] a un elemento.
- Avanzado : en este caso, podemos usar 2 puntos de anclaje, es decir, el punto de inicio y el punto final del sticky usando los atributos data-top-anchor y data-btm-anchor , que tienen el «idOfSomething» como sus valores, para los puntos de anclaje superior e inferior respectivamente.
- Adherirse a la parte superior: este es el caso predeterminado que permite que los elementos adhesivos se adhieran a la parte superior a medida que el usuario se desplaza.
- Stick to Bottom: este atributo proporciona otra forma de usar elementos adhesivos. 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 [ data-stick-to=”bottom” ].
- Navegación fija: permite agregar una barra de navegación fija o navegación lateral especificando el . pega clase a tu barra superior. Aquí, la barra de título está envuelta dentro de un contenedor adhesivo. Agregar un atributo fijo de datos al archivo . La clase title-bar la convierte en una barra de navegación fija. La clase .title-bar-left y la clase .title-bar-right son las clases donde puede mostrar su información/contenido para la barra de navegación.
Sintaxis para agregar la navegación adhesiva:
<div data-sticky-container>
<div class="title-bar" data-sticky data-options="marginTop:0;">
<div class="title-bar-left"> Content </div>
<div class="title-bar-right"> Content </div>
</div>
</div>
Clase fija CSS básica:
- .sticky : esta clase permite que los elementos se adhieran a la posición especificada.
- celda pequeña-* derecha : esta clase se usa para crear la celda de tamaño pequeño de un número específico y se alinea en la posición del lado derecho. También podemos especificar las diferentes posiciones de alineación.
Atributos básicos de CSS Sticky:
- [data-sticky]: la clase .sticky se sigue con este atributo, que aprovecha las diversas funcionalidades del elemento.
- [data-sticky-container]: este atributo se puede usar con elementos adhesivos, que deben estar envueltos en un contenedor, lo que determinará el tamaño y el diseño de la cuadrícula.
Ejemplo : este ejemplo ilustra Foundation CSS Sticky.
HTML
<!DOCTYPE html> <html> <head> <!-- 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 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"> <img class="thumbnail" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Salida :
Fundación CSS Sticky
Ejemplo : el siguiente código es un ejemplo de navegación fija. Aunque la página se desplaza, la posición de la barra de título permanece constante.
HTML
<!DOCTYPE html> <html> <head> <!-- 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> <div data-sticky-container> <div class="title-bar" data-sticky data-options="marginTop:0;"> <div class="title-bar-left"> <span class="title-bar-title"> GeeksforGeeks </span> </div> <div class="title-bar-right"> <ul class="dropdown menu align-right" data-dropdown-menu> <li> <a href="#">GFG 1</a> <ul class="menu"> <li><a href="#">GFG 1A</a></li> <li><a href="#">GFG 1B</a></li> </ul> </li> <li> <a href="#">GFG 2</a> <ul class="menu"> <li><a href="#">GFG 2A</a></li> <li><a href="#">GFG 2B</a></li> </ul> </li> <li><a href="#">GFG 3</a></li> <li><a href="#">GFG 4</a></li> </ul> </div> </div> <center> <h1 style="color: green">GeeksforGeeks</h1> <h3>Foundation CSS Sticky Navigation</h3> <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> </center> </div> <script> $(document).foundation(); </script> </body> </html>
Salida :
Navegación fija de CSS básico
Referencia : https://get.foundation/sites/docs/sticky.html
Publicación traducida automáticamente
Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA