Fundación CSS fregadero de cocina pegajoso

Posted on by Rudeus Greyrat

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.

Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones . El componente adhesivo Kitchen Sink le permite crear algo que permanece pegado en la parte superior de la página a medida que el usuario se desplaza hacia abajo. Los componentes pegajosos encuentran su uso en barras laterales, enlaces externos o barras superiores. Agregue la clase fija 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.

Clase fija CSS básica:

  • sticky: esta clase permite que los elementos se peguen en la posición especificada.
  • celda pequeña-* derecha: esta clase se utiliza 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.

Sintaxis:

<div class="columns size-6 ..." 
     data-sticky-container>
  <div class="sticky" data-sticky data-margin-top="value">
    <img class="thumbnail" src="...">
  </div>
</div>

Componentes adhesivos del fregadero de cocina:

  • 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. Agregue la clase fija y [data-sticky] a un elemento para crear un elemento fijo.
  • Stick to Bottom: Foundation CSS también proporciona otra forma de usar elementos adhesivos. 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 fija, [data- sticky ] y [data-stick-to=”bottom”] .

Ejemplo 1: el siguiente código demuestra cómo el elemento fijo se pega en la parte superior a medida que el usuario se desplaza.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Foundation CSS Kitchen Sink Sticky</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>
  <style>
    .demo-column {
      height: 4000px;
      width: 70%;
    }
  </style>
</head>
<body>
  <h1 style="color:green">GeeksforGeeks</h1>
  <strong>Foundation CSS Sticky</strong>
  <br>
  <div class="row">
    <div class="columns demo-column small-6" id="example1" data-something>
      <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.
      </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.
      </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.
      </p>
   
    </div>
    <div class="columns small-6 right"
         data-sticky-container>
      <div class="sticky"
           data-sticky data-anchor="example1">
        <img class="thumbnail float-right"
             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 fregadero de cocina pegajoso

Fundación CSS fregadero de cocina pegajoso

Ejemplo 2: el siguiente código demuestra cómo el elemento fijo se pega en la parte inferior a medida que el usuario se desplaza.

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>
  <style>
    .demo-column {
      height: 10000px;
      width: 70%;
    }
  </style>
</head>
<body>
  <h1 style="color:green">GeeksforGeeks</h1>
  <h3>Foundation CSS Sticky</h3>
  <div class="row">
    <div class="columns demo-column small-6"
         id="example1"
         data-something>
      <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.
      </p>
   
      <p id="example2">
        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.
      </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.
      </p>
   
    </div>
    <div class="columns small-6 right"
         data-sticky-container>
      <div class="sticky"
           data-sticky data-stick-to="bottom"
           data-anchor="example1">
        <img class="thumbnail float-right"
             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 fregadero de cocina pegajoso

Fundación CSS fregadero de cocina pegajoso

Referencia: https://get.foundation/sites/docs/kitchen-sink.html#sticky

Publicación traducida automáticamente

Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *