UIKIT- Scrollspyhttp://www.getuikit.com/docs/scrollspy.html

Scrollspy Sirve para desencadenar/activar eventos y animaciones

entras se desplaza de su página.

Uso

El componente Scrollspy escucha a la página de desplazamiento y desencadena eventos en función de la posición de desplazamiento. Por ejemplo, si se desplaza hacia abajo una página y un elemento aparece por primera vez en la ventana gráfica se puede desencadenar una animación suave a desvanecerse en el elemento.

Atributo de datos Descripción

data-uk-scrollspy="{cls:'MY-CLASS'}" Aplica la clase sólo la primera vez que el elemento aparece en el visor.

data-uk-scrollspy="{cls:'MY-CLASS', repeat: true}" Aplica la clase cada vez que el elemento aparece en el visor.

data-uk-scrollspy="{cls:'MY-CLASS', delay:600}" Añade un retraso en milisegundos a la animación.

Por lo general, las clases del componente de Animación se utilizan junto con el scrollspy.

Ejemplos

En este ejemplo se utiliza la opción repeat: true. Desplácese hacia arriba y hacia abajo para ver las animaciones desencadenadas.

Marcado

<div data-uk-scrollspy="{cls:'uk-animation-fade'}">...</div>

<div data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">...</div>

<div data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">...</div>

JavaScript eventos

El componente scrollspy desencadena un evento uk.scrollspy.inview  cada vez que un elemento se encuentra en la ventana gráfica y uk.scrollspy.outview cuando un elemento sale de la ventana gráfica.

Ejemplo

$('[data-uk-scrollspy]').on({

'uk.scrollspy.inview': function(){

console.log("Element is visible.");

},

'uk.scrollspy.outview': function(){

console.log("Element is not visible.");

}

});

Scrollspy Nav

Para actualizar automáticamente el elemento de menú activo en un menú en función de la posición de desplazamiento de su sitio, sólo tiene que añadir los datos de atributos de datos-uk-scrollspy-nav a cualquier navegación. Cada elemento del menú debe enlazar con la ID de su correspondiente parte del sitio.

Atributo de datos Descripción

data-uk-scrollspy-nav Dispara el necesario JavaScript para la funcionalidad de la navegación scrollspy.

data-uk-scrollspy-nav="{closest:'MY-SELECTOR'}"

Busca el elemento más cercano que coincida con el selector probando el elemento en sí y atravesando a través de sus antepasados en el árbol DOM.

data-uk-scrollspy-nav="{smoothscroll:true}"

Aplica el componente de desplazamiento suave cuando salta entre las diferentes secciones del sitio.

data-uk-scrollspy-nav="{cls:'MY-CLASS'}" Por defecto ScrollspyNav alterna el uk-activa clase. Utilice el cls opción de utilizar su propio nombre de la clase.

Para un ejemplo de la nav scrollspy, sólo echa un vistazo a nuestra página de prueba Scrollspy .

Marcado

<ul class="uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li',

smoothscroll:true}">

<li><a href="#MY-ID">...</a></li>

<li><a href="#MY-ID2">...</a></li>

</ul>

<div id="MY-ID">...</div>

<div id="MY-ID2">...</div>