Afijo Bootstrap JS
Afijo JS (affix.js)
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 la posición de CSS de estático a fijo), dependiendo de la posición de desplazamiento.
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.
Para obtener más información, lea nuestro Tutorial de Bootstrap Affix .
Sugerencia: el complemento Affix se usa a menudo junto con el complemento Scrollspy .
A través de datos-* Atributos
Agregue data-spy="affix"al elemento que desea espiar y el
atributo para calcular la posición del pergamino.data-offset-top|bottom="number"
Ejemplo
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
A través de JavaScript
Habilitar manualmente con:
Ejemplo
$('.nav').affix({offset: {top: 150} });
Opciones de fijación
Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-, como en data-offset="".
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like offset: {top:25}For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
Eventos de afijos
La siguiente tabla enumera todos los eventos de afijos disponibles.
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) |
|
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) |
|
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top) |
|
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top) |
|
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom) |
|
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom) |
Más ejemplos
Barra de navegación adjunta
Cree un menú de navegación fijo horizontal:
Ejemplo
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Usar jQuery para colocar automáticamente una barra de navegación
Use el método outerHeight() de jQuery para colocar la barra de navegación después de que el usuario haya pasado un elemento específico (<encabezado>):
Ejemplo
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Scrollspy y afijo
Usando el complemento Affix junto con el complemento Scrollspy :
Menú horizontal (barra de navegación)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Menú vertical (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
Barra de navegación animada en afijo
Usa CSS para manipular las diferentes clases de .affix:
Ejemplo: cambiar el color de fondo y el relleno de la barra de navegación al desplazarse
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff !important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
}
Ejemplo: deslizar en la barra de navegación
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}