Data Inview

Purpose

Create fixed position content panels that are conditionally displayed as the web page is scrolled and resized.

Example

Section with a conditional bottom bar

A bar will be displayed at the bottom when this section is partially out of the viewport.

View state:

View code 
<section class="wb-inview bar-demo" data-inview="bottom-bar">
	<h3 class="no-gutter">Section with a conditional bottom bar</h3>
	...
</section>

<section id="bottom-bar" class="wb-overlay modal-content overlay-def wb-bar-b">
	<header>
		<h2 class="modal-title">Bottom bar</h2>
	</header>
	...
</section>

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Section with a conditional top bar

A bar will be displayed at the top when this section is fully out of the viewport (class="show-none").

View state:

View code 
<section class="wb-inview show-none bar-demo" data-inview="top-bar">
	<h3 class="no-gutter">Section with a conditional top bar</h3>
	...
</section>

<section id="top-bar" class="wb-overlay modal-content overlay-def wb-bar-t">
	<header>
		<h2 class="modal-title">Top bar</h2>
	</header>
	...
</section>

Section that triggers a fade in or out effect for the next section

The next section will fade in when this section is partially out of the viewport.

View state:

View code 
<section class="wb-inview bar-demo" data-inview="fade-effect">
	<h3 class="no-gutter">Section that triggers a fade in or out effect for the next section</h3>
	...
</section>

<section id="fade-effect" class="fade bar-demo">
	<h3 class="no-gutter">Section that fades in/out</h3>
	...
</section>

Section that fades in/out

This section fades in or out based upon the view state of the previous section.

View state change events

The view state of this section is being identified below through JavaScript.

View state:

View code

HTML

<section class="wb-inview bar-demo">
	<h3 class="no-gutter">View state change events</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 );

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Top bar

Bottom bar

Date modified: