Foundation CSS es un marco front-end gratuito y de código abierto para desarrollar diseños web flexibles. Es uno de los marcos CSS más potentes y ofrece una cuadrícula receptiva, así como componentes de interfaz de usuario HTML y CSS, plantillas y más, en todas las plataformas. También tiene varias funciones de extensión de JavaScript que son opcionales. También se renderiza rápidamente en dispositivos móviles gracias a la inclusión de la utilidad Fastclick.js.
El componente fijo se usa para crear cualquier cosa que permanezca en la parte superior de la página cuando el usuario se desplaza hacia abajo. Se pueden crear barras laterales, enlaces externos y barras superiores con estos componentes. Para crear un elemento adhesivo, use la clase adhesiva y la propiedad adhesiva de datos con un elemento. El parámetro data-sticky-container rige el tamaño y el diseño de cuadrícula de los elementos fijos.
Con los atributos y la clase ya establecidos, podemos hacer que un elemento sea pegajoso pero permanecerá pegajoso a lo largo del documento. Pero si queremos especificar un cierto espacio a través del cual el elemento permanecerá pegajoso y desplazable, podemos usar dos anclas para especificar desde dónde el elemento comenzará a ser pegajoso y dónde dejará de serlo.
Para especificar los anclajes podemos usar dos atributos data-top-anchor=”idOfSomething:[top/bottom]” , data-btm-anchor=”idOfSomething:top/bottom]” o incluso podemos establecer un número de píxel en lugar de un id data-top-anchor=”pixelNumber”.
Clases básicas de CSS Sticky Advanced:
- sticky: esta clase hace posible que los elementos permanezcan en el lugar definido.
Atributos avanzados de Foundation CSS Sticky:
- data-sticky: la clase sticky va seguida de esta propiedad, que proporciona al elemento numerosas funciones.
- data-sticky-container: este atributo es para elementos fijos que deben encerrarse en un contenedor que determina su tamaño y diseño de cuadrícula.
- data-top-anchor: Esto especifica desde dónde un elemento comenzará a ser fijo. Este atributo toma el id de un elemento como su valor.
- data-btm-anchor: Esto especifica desde dónde un elemento dejará de ser pegajoso. Este atributo toma el id de un elemento como su valor.
Ejemplo 1: El siguiente ejemplo demuestra cómo podemos especificar la posición en la que la imagen comenzará a ser pegajosa y dejará de ser pegajosa.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css">
<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
</head>
<body>
<div style="margin:2rem;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h4>
Foundation CSS Sticky Advanced
</h4>
</div>
<div class="row">
<div class="columns demo-column small-6">
<p class="margin-3">
The Image at the right side will
slide now but it will become
sticky by the time you scroll
past the next paragraph.
</p>
<p class="margin-3"
id="first">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<strong class="margin-3"
id="last">
The image stops being sticky from this paragraph.
</strong>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
</div>
<div class="columns small-6 right" data-sticky-container>
<div class="sticky"
data-sticky data-top-anchor="first:top"
data-btm-anchor="last:bottom">
<img class="thumbnail" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra cómo podemos especificar la posición en la que la barra de navegación comenzará a ser fija y dejará de serlo.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css">
<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
</head>
<body>
<div data-sticky-container>
<div class="title-bar"
data-sticky data-options="marginTop:0;"
style="width:100%"
data-top-anchor="first:top"
data-btm-anchor="last:bottom">
<div class="title-bar-left"
style="font-size:1.5rem;">
<strong>
GeeksforGeeks
</strong>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>
<input type="search"
placeholder="Search">
</li>
<li>
<button type="button"
class="button">
Search</button>
</li>
</ul>
</div>
</div>
</div>
<div style="margin:2rem;"
id="first">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h4>
Foundation CSS Sticky Advanced
</h4>
</div>
<p class="margin-3">
The Navigation Bar will stay stuck
from the start of the above div.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<strong class="margin-3"
id="last">
The navbar stops being sticky
from this paragraph.
</strong>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/sticky.html#advanced
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA