El afijo Plugin
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 "stick" 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.
Ejemplo 1) Una barra de navegación fijada:
Ejemplo 2) Una barra lateral fijada:
Con Affix, cuando nos desplazamos hacia arriba y abajo de la página, el menú es siempre visible y bloqueada en su posición.
Cómo crear un menú de navegación Colocada
El siguiente ejemplo muestra cómo 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 " El siguiente ejemplo muestra cómo crear un menú de navegación vertical, fijada:
Ejemplo
<ul class="nav nav-pills nav-stacked" data-spy="affix"
data-offset-top="205"> Inténtalo tú mismo " ejemplo Explicación
Añadir data-spy="affix" al elemento que desea colocar.
Opcionalmente, agregue la data-offset-top|bottom atributo para calcular la posición del desplazamiento.
Cómo funciona
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.
- El plugin añade la
.affix-topo.affix-bottomclase para indicar que el elemento se encuentra en su parte superior-inferior más o más posiciones. Posicionamiento con CSS no es necesaria en este momento. - Desplazándose más allá del elemento fijada desencadena la colocación real - esto es donde el plugin reemplaza el
.affix-topo.affix-bottomclase con el.affixclase (conjuntosposition:fixed). En este punto, se debe añadir el CSStopobottominmueble para posicionar el elemento situará en la página. - Si se define un desplazamiento inferior, desplazándose más allá que sustituye a la
.affixclase con.affix-bottom. Dado que las compensaciones son opcionales, estableciendo uno requiere que establezca el CSS correspondiente. En este caso, añadirposition:absolutecuando sea necesario.
En el primer ejemplo anterior, el plugin Affix añade el .affix clase (posición: fijo) a la <nav> elemento cuando hemos desplazado 197 píxeles desde la parte superior. Si abre el ejemplo, también verá que hemos añadido la CSS top propiedad con un valor de 0 a la .affix clase. Esto es para asegurarse de que la barra de navegación se mantiene en la parte superior de la página en todo momento, cuando nos hemos desplazado 197 píxeles desde la parte superior.
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 " Completar Bootstrap Affix Referencia
Para una referencia completa de todos afijo métodos y eventos, visite nuestro Bootstrap JS Affix de referencia .