Data Inview

Intention

Créer des panneaux de contenu de position fixe qui sont conditionnellement affichées quand la page est défiler et redimensionner.

Exemple

Section avec une barre en bas conditionnelle

Une barre sera affichée en bas lors de cette section est partiellement hors de la clôture.

L'état d'affichage :

Visualiser le code

<section class="wb-inview bar-demo" data-inview="barre-bas">
	<h3 class="no-gutter">Section avec une barre en bas conditionnelle</h3>
	...
</section>

<section id="barre-bas" class="wb-overlay modal-content overlay-def wb-bar-b">
	<header>
		<h2 class="modal-title">Barre en bas</h2>
	</header>
	...
</section>

Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.

Section avec une barre en haut conditionnelle

Une barre sera affichée en haut lors de cette section est entièrement hors de la clôture (class="show-none").

L'état d'affichage :

Visualiser le code

<section class="wb-inview show-none bar-demo" data-inview="barre-haut">
	<h3 class="no-gutter">Section avec une barre en haut conditionnelle</h3>
	...
</section>

<section id="barre-haut" class="wb-overlay modal-content overlay-def wb-bar-t">
	<header>
		<h2 class="modal-title">Barre en haut</h2>
	</header>
	...
</section>

Section qui cause la section suivante à apparaître ou disparaître

La section suivante va apparaître quand cette section est partiellement hors de la clôture.

L'état d'affichage :

Visualiser le code

<section class="wb-inview bar-demo" data-inview="fade-effect">
	<h3 class="no-gutter">Section qui cause la section suivante à apparaître ou disparaître</h3>
	...
</section>

<section id="fade-effect" class="fade bar-demo">
	<h3 class="no-gutter">Section va apparaître / disparaître</h3>
	...
</section>

Section qui va apparaître / disparaître

Cette section apparaît et disparaît en fonction de l'état de la section précédente de vue.

Événements de changement de l'état d'affichage

L'état d'affichage de cette section est identifié ci-dessous via JavaScript.

L'état d'affichage :

Visualiser le code

HTML

<section class="wb-inview bar-demo">
	<h3 class="no-gutter">Événements de changement de l'état d'affichage</h3>
	...
</section>

JavaScript

(function( $, wb ) {
"use strict";

wb.doc.on( "all.wb-inview partial.wb-inview none.wb-inview", function( event) {
	if ( event.namespace === "wb-inview" ) {
		$( event.target ).find( ".view-state-status" ).html( event.type );
	}
});

})( jQuery, wb );

Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.

Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.

Date de modification :: 2014-07-21

Sélection de la langue

Recherche et menus

Recherche

Data Inview

Intention

Exemple

Section avec une barre en bas conditionnelle

Section avec une barre en haut conditionnelle

Section qui cause la section suivante à apparaître ou disparaître

Section qui va apparaître / disparaître

Événements de changement de l'état d'affichage

HTML

JavaScript