Foundation CSS es un marco front-end gratuito y de código abierto para crear diseños web dinámicos. Incluye una cuadrícula receptiva, componentes de interfaz de usuario HTML y CSS, plantillas y más, lo que lo convierte en uno de los marcos CSS más completos. También tiene una serie de funciones de extensión de JavaScript que se pueden activar o desactivar. También se renderiza rápidamente en dispositivos móviles gracias a la integración de la utilidad Fastclick.js.
Los paneles fuera del lienzo se colocan fuera de la ventana gráfica y se deslizan cuando están activos. Se puede acceder a este menú fuera del lienzo desde la parte izquierda, derecha, superior o inferior de la pantalla, y se puede superponer, empujar y operar con elementos pegajosos. Estos patrones se crearon teniendo en cuenta los dispositivos móviles y son aptos para dispositivos móviles. Esto también se puede usar como una barra lateral en pantallas medianas y de escritorio.
Cuando usamos una vista fuera del lienzo, al abrirla, los elementos con position: fixed desaparecen cuando el fuera del lienzo se abre con una transición de empuje. La razón de esto es que la propiedad de transformación del contenedor de contenido fuera del lienzo permite que el elemento fijo se comporte en una posición: manera absoluta .
Foundation CSS Off-canvas Sticky nos permite preservar esa posición: propiedad fija . Podemos agregar el atributo Adhesivo fuera del lienzo y asegurarnos de que el elemento permanezca fijo incluso después del fuera del lienzo.
Foundation CSS Off-canvas Sticky Class:
- Adhesivo: esta clase se utiliza para hacer que un elemento se adhiera a una posición particular.
Foundation CSS Off-canvas Sticky Attributes:
- data-off-canvas-sticky: Este atributo es el principal responsable de preservar la apariencia fija de un elemento. Cuando este atributo se agrega a un elemento, se asegurará de que el elemento no se oculte cuando se abra el lienzo fuera del lienzo.
Podemos usar clases y atributos de Foundation CSS Sticky simultáneamente con este atributo. Aunque cuando usamos el atributo .data-sticky , el elemento se fija de forma predeterminada con el desplazamiento y la apertura del lienzo. Pero el uso del atributo data-off-canvas-sticky lo mantendrá fijo cuando se abra el fuera del lienzo.
Ejemplo 1: El siguiente código demuestra cómo podemos hacer que una barra superior permanezca en su posición cuando se abre el lienzo.
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">
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.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: 1rem 5rem;">
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner"
data-off-canvas-wrapper>
<div class="off-canvas position-left"
id="off_canvas_left" data-off-canvas>
<ul style="margin: 2rem;">
<li><a>DSA</a></li>
<li><a>Algorithms</a></li>
<li><a>Competetive Programming</a></li>
<li><a>Java</a></li>
<li><a>C++</a></li>
<li><a>Python</a></li>
</ul>
</div>
<div class="top-bar sticky" data-sticky
data-off-canvas-sticky>
<div class="top-bar-left">
<ul class="dropdown menu"
data-dropdown-menu>
<li class="menu-text"
style="color: green;">
GeeksforGeeks
</li>
</ul>
</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 class="off-canvas-content"
data-off-canvas-content>
<div style="margin: 1rem;">
<h3>Foundation CSS Off-canvas Sticky</h3>
</div>
<button type="button" class="button"
data-toggle="off_canvas_left"
style="margin: 1rem">
Click Here to open Off-Canvas
</button>
<p style="margin: 1rem;">
In this example we can see the off-canvas
opening doesn;t effect the
position of the sticky element.
</p>
<p style="margin: 1rem;">
Also we can always use all the
sticky classes and attributes.
</p>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Mire de cerca el gif de salida, puede ver que todo el contenido de las páginas cambia cuando se abre el lienzo fuera del lienzo, pero la barra de navegación superior está fija.
Ejemplo 2: el código que se proporciona a continuación demuestra cómo los atributos data-off-canvas-sticky y data-sticky producen el mismo resultado con respecto a la corrección durante la apertura de off-canvas.
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">
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.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: 1rem 5rem;">
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner"
data-off-canvas-wrapper>
<div class="off-canvas position-left"
id="off_canvas_left" data-off-canvas>
<ul style="margin: 2rem;">
<li><a>DSA</a></li>
<li><a>Algorithms</a></li>
<li><a>Competetive Programming</a></li>
<li><a>Java</a></li>
<li><a>C++</a></li>
<li><a>Python</a></li>
</ul>
</div>
<div class="off-canvas-content"
data-off-canvas-content>
<div style="margin: 1rem;">
<h1 style="color: green;">
Foundation CSS Off-canvas Sticky
</h1>
<h4>Foundation CSS Off-canvas Sticky</h4>
</div>
<button type="button" class="button"
data-toggle="off_canvas_left">
Click Here to open
Off-Canvas
</button>
</div>
<div class="" data-off-canvas-sticky data-margin-top="0">
<img class="thumbnail"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</div>
<div class="sticky" data-sticky data-margin-top="0">
<img class="thumbnail"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210702175749/20210702175652.gif"
style="width: 15rem;">
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Referencia:https://get.foundation/sites/docs/off-canvas.html#sticky
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA