Complemento Bootstrap Affix (avanzado)

El complemento Afijo

El complemento Affix permite que un elemento se adhiera (bloquee) a un área de la página. Esto se usa a menudo con los menús de navegación o los botones de íconos sociales, para que se "peguen" en un área específica mientras se desplaza hacia arriba y hacia abajo en la página.

El complemento activa y desactiva este comportamiento (cambia el valor de CSS positiona static) fixed, dependiendo de la posición de desplazamiento.

Ejemplo 1) Una barra de navegación adjunta:

Ejemplo 2) Una barra lateral adjunta:

Con Affix, cuando nos desplazamos hacia arriba y hacia abajo en la página, el menú siempre está visible y bloqueado en su posición.

Cómo crear un menú de navegación adjunto

El siguiente ejemplo muestra cómo crear un menú de navegación fijo horizontal:

El siguiente ejemplo muestra cómo crear un menú de navegación adjunto vertical:

Ejemplo explicado

Agregue data-spy="affix"al elemento que desea adjuntar.

Opcionalmente, agregue el data-offset-top|bottomatributo para calcular la posición del pergamino.

Cómo funciona

El complemento de afijo alterna entre tres clases: .affix, .affix-topy .affix-bottom. Cada clase representa un estado particular. Debe agregar propiedades CSS para manejar las posiciones reales, con la excepción de position:fixed la .affixclase.

• El complemento agrega la clase .affix-topo .affix-bottompara indicar que el elemento está en su posición más alta o más baja. El posicionamiento con CSS no es necesario en este momento.


• Desplazarse más allá del elemento adjunto activa la fijación real: aquí es donde el complemento reemplaza la clase .affix-topo .affix-bottomcon la .affixclase (conjuntos position:fixed). En este punto, debe agregar el CSS topo la bottompropiedad para colocar el elemento adjunto en la página.


• Si se define un desplazamiento inferior, el desplazamiento más allá reemplaza la .affixclase con .affix-bottom. Dado que las compensaciones son opcionales, configurar uno requiere que configure el CSS apropiado. En este caso, agregue position:absolutecuando sea necesario.

En el primer ejemplo anterior, el complemento Affix agrega la .affixclase (posición: fija) al elemento <nav> cuando nos hemos desplazado 197 píxeles desde la parte superior. Si abre el ejemplo, también verá que agregamos la toppropiedad CSS con un valor de 0 a la .affixclase. Esto es para asegurarse de que la barra de navegación permanezca en la parte superior de la página en todo momento, cuando nos hayamos desplazado 197 píxeles desde la parte superior.

Scrollspy y afijo

Usando el complemento Affix junto con el complemento Scrollspy :

Referencia completa del afijo Bootstrap

Para obtener una referencia completa de todos los métodos y eventos de afijos, vaya a nuestra Referencia de afijos JS de Bootstrap .