JS Affix (affix.js)
El plug-in permite Affix un elemento para convertirse en pegada (bloqueado) a un área en la página. Esto se utiliza a menudo con los menús de navegación o botones de icono sociales, para que sean "pegan" en un área específica mientras se desplaza arriba y abajo de la página.
El plug-in cambia este comportamiento dentro y fuera (cambia el valor de posición de CSS de estático a fijo), dependiendo de la posición de desplazamiento.
El afijo Plugin alterna entre tres clases: .affix , .affix-top , y .affix-bottom . Cada clase representa un estado en particular. Debe añadir propiedades CSS para manejar las posiciones reales, con la excepción de position:fixed en el .affix clase.
Para obtener más información, lea nuestra Bootstrap Affix Tutorial .
Consejo: El plug-in Affix se utiliza a menudo junto con el Scrollspy plugin.
Via data-* Atributos
Añadir data-spy="affix" al elemento que desee para espiar, y la data-offset-top|bottom=" number " atributo para calcular la posición del desplazamiento.
Ejemplo
<ul class="nav nav-pills nav-stacked" data-spy="affix"
data-offset-top="205">
Inténtalo tú mismo " a través de JavaScript
Habilitar manualmente con:
colocar Opciones
Las opciones pueden ser transmitidos a través de los atributos de datos o JavaScript. Para los atributos, al añadir el nombre de opción de de datos, como en la técnica de offset = "".
| Nombre | Tipo | Defecto | Descripción |
|---|---|---|---|
| offset | number | object | function | 10 | Especifica el número de píxeles para desplazar la pantalla de la hora de calcular la posición de desplazamiento. Cuando se utiliza un solo número, el offset se suma a las dos direcciones superior e inferior. Si sólo desea controlar la parte superior o inferior, utilice un objeto, como offset: {top:25} Para múltiples desplazamientos, utilice offset: {top:25, bottom:50} Consejo: Utilice una función de forma dinámica para proporcionar un desplazamiento (puede ser útil para los diseños de respuesta) |
| target | selector | node | element | the window object | Especifica el elemento objetivo del afijo |
colocar Eventos
En la siguiente tabla se enumeran los eventos de afijos todos disponibles.
| Evento | Descripción | Intentalo |
|---|---|---|
| affix.bs.affix | Se produce antes de añadir el posicionamiento fijo al elemento (por ejemplo, cuando el .affix-top clase está a punto de ser reemplazado por el .affix clase) | Intentalo |
| affixed.bs.affix | Se produce después de añadir el posicionamiento fijo con el elemento (por ejemplo, después de la .affix-top clase se reemplaza con el .affix clase) | Intentalo |
| affix-top.bs.affix | Se produce antes de que el elemento superior vuelve a su posición original (no fijo) (por ejemplo, la .affix clase está a punto de ser reemplazado con .affix-top ) | Intentalo |
| affixed-top.bs.affix | Se produce después de que el elemento superior vuelve a su posición original (no fijo) (por ejemplo, la .affix clase ha sido sustituido por .affix-top ) | Intentalo |
| affix-bottom.bs.affix | Se produce antes de que el elemento de fondo vuelve a su posición original (no fijos) (por ejemplo, la .affix clase está a punto de ser reemplazado con .affix-bottom ) | Intentalo |
| affixed-bottom.bs.affix | Se produce después de que el elemento inferior vuelve a su posición original (no fijado) (por ejemplo, la .affix clase ha sido reemplazado con .affix-bottom ) | Intentalo |
Ejemplos
Colocada barra de navegación
Crear un menú de navegación horizontal fijada:
Ejemplo
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> Inténtalo tú mismo " Usando jQuery para fijar automáticamente una barra de navegación
Usar jQuery outerHeight() método para fijar la barra de navegación después de que el usuario ha desplazado pasó un elemento especificado (<header>) :
Scrollspy y Affix
Utilizando el plugin de Affix junto con el Scrollspy plugin:
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> Inténtalo tú mismo " 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> Inténtalo tú mismo " navbar animado en afijo
Usar CSS para manipular los diferentes .affix clases:
Ejemplo - Cambiar el color de fondo y el relleno de la barra de navegación de desplazamiento
.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;
} Inténtalo tú mismo " Ejemplo - diapositiva 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;
} Inténtalo tú mismo "