---
{
	"title": "Data Inview",
	"language": "en",
	"category": "Plugins",
	"description": "Displays an overlay when a section moves out of the viewport.",
	"tag": "data-inview",
	"parentdir": "data-inview",
	"altLangPrefix": "data-inview",
	"css": ["demo/data-inview"],
	"js": ["demo/data-inview"],
	"dateModified": "2014-07-21"
}
---
<span class="wb-prettify all-pre"></span>

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

<section>
	<h2>Conditional bar example</h2>

	<section class="wb-inview bar-demo" data-inview="bottom-bar">
		<h3 class="no-gutter">Section with a conditional bottom bar</h3>
		<p>A bar will be displayed at the bottom when this section is <strong>partially out</strong> of the viewport.</p>
		<p><strong>View state:</strong> <code class="view-state-status"></code></p>
		<details>
			<summary>View code</summary>
			<pre><code>&lt;section class=&quot;wb-inview bar-demo&quot; data-inview=&quot;bottom-bar&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section with a conditional bottom bar&lt;/h3&gt;
	...
&lt;/section&gt;

&lt;section id=&quot;bottom-bar&quot; class=&quot;wb-overlay modal-content overlay-def wb-bar-b&quot;&gt;
	&lt;header&gt;
		&lt;h2 class=&quot;modal-title&quot;&gt;Bottom bar&lt;/h2&gt;
	&lt;/header&gt;
	...
&lt;/section&gt;</code></pre>
		</details>
	</section>

	<p role="img" aria-label="" class="text-muted">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>

	<section class="wb-inview show-none bar-demo" data-inview="top-bar">
		<h3 class="no-gutter">Section with a conditional top bar</h3>
		<p>A bar will be displayed at the top when this section is <strong>fully out</strong> of the viewport (with <code>class="show-none"</code>).</p>
		<p><strong>View state:</strong> <code class="view-state-status"></code></p>
		<details>
			<summary>View code</summary>
			<pre><code>&lt;section class=&quot;wb-inview show-none bar-demo&quot; data-inview=&quot;top-bar&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section with a conditional top bar&lt;/h3&gt;
	...
&lt;/section&gt;

&lt;section id=&quot;top-bar&quot; class=&quot;wb-overlay modal-content overlay-def wb-bar-t&quot;&gt;
	&lt;header&gt;
		&lt;h2 class=&quot;modal-title&quot;&gt;Top bar&lt;/h2&gt;
	&lt;/header&gt;
	...
&lt;/section&gt;</code></pre>
		</details>
	</section>
</section>

<section>
	<h2>CSS transition example</h2>
	<section class="well">
		<h3 class="h5 mrgn-tp-sm">List of supported CSS transition</h3>
		<ul>
			<li><code>class="pop"</code></li>
			<li><code>class="fade"</code></li>
			<li><code>class="slide"</code></li>
			<li><code>class="slidefade"</code></li>
			<li><code>class="slidevert"</code></li>
		</ul>
		<p>Reverse the transition by adding the <code>reverse</code> class with the CSS transition.</p>
	</section>
	<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>
		<p>The next section will fade in when this section is <strong>partially out</strong> of the viewport.</p>
		<p><strong>View state:</strong> <code class="view-state-status"></code></p>
		<details>
			<summary>View code</summary>
			<pre><code>&lt;section class=&quot;wb-inview bar-demo&quot; data-inview=&quot;fade-effect&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section that triggers a fade in or out effect for the next section&lt;/h3&gt;
	...
&lt;/section&gt;

&lt;section id=&quot;fade-effect&quot; class=&quot;fade bar-demo&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section that fades in/out&lt;/h3&gt;
	...
&lt;/section&gt;</code></pre>
		</details>
	</section>

	<section id="fade-effect" class="fade bar-demo">
		<h3 class="no-gutter">Section that fades in/out <code>id="fade-effect"</code></h3>
		<div class="jumbotron mrgn-tp-lg">
			<p>This section fades in or out based upon the view state of the previous section.</p>
		</div>
	</section>

	<section id="fade-effect2" class="fade bar-demo">
		<h3 class="no-gutter">Section that fades in/out <code>id="fade-effect2"</code></h3>
		<div class="jumbotron mrgn-tp-lg">
			<p>This section fades in or out based upon the view state of the next section.</p>
		</div>
	</section>

	<section class="wb-inview show-none bar-demo" data-inview="fade-effect2">
		<h3 class="no-gutter">Section that triggers a fade in or out effect for the previous section</h3>
		<p>The previous section will fade in when this section is <strong>partially out</strong> of the viewport (with <code>class="show-none"</code>).</p>
		<p><strong>View state:</strong> <code class="view-state-status"></code></p>
		<details>
			<summary>View code</summary>
			<pre><code>&lt;section id=&quot;fade-effect2&quot; class=&quot;fade bar-demo&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section that fades in/out&lt;/h3&gt;
	...
&lt;/section&gt;

&lt;section class=&quot;wb-inview show-none bar-demo&quot; data-inview=&quot;fade-effect2&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section that triggers a fade in or out effect for the previous section&lt;/h3&gt;
	...
&lt;/section&gt;
</code></pre>
		</details>
	</section>
</section>

<div class="text-muted">
	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
	<p role="img" aria-label="">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.</p>
	<p role="img" aria-label="">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.</p>
	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
	<p role="img" aria-label="">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.</p>
	<p role="img" aria-label="">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.</p>
	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
	<p role="img" aria-label="">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.</p>
	<p role="img" aria-label="">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.</p>
	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
	<p role="img" aria-label="">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.</p>
	<p role="img" aria-label="">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.</p>
	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
	<p role="img" aria-label="">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.</p>
	<p role="img" aria-label="">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.</p>
	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
	<p role="img" aria-label="">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.</p>
	<p role="img" aria-label="">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.</p>
	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
	<p role="img" aria-label="">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.</p>
</div>

<section id="top-bar" class="wb-overlay modal-content overlay-def wb-bar-t">
	<header>
		<h2 class="modal-title">Top bar</h2>
	</header>
	<ul class="list-inline">
		<li>
			<button class="btn btn-default" type="button">Button 1</button>
		</li>
		<li>
			<button class="btn btn-default" type="button">Button 2</button>
		</li>
		<li>
			<button class="btn btn-default" type="button">Button 3</button>
		</li>
	</ul>
</section>

<section id="bottom-bar" class="wb-overlay modal-content overlay-def wb-bar-b">
	<header>
		<h2 class="modal-title">Bottom bar</h2>
	</header>
	<ul class="list-inline">
		<li>
			<button class="btn btn-default" type="button">Button 1</button>
		</li>
		<li>
			<button class="btn btn-default" type="button">Button 2</button>
		</li>
		<li>
			<button class="btn btn-default" type="button">Button 3</button>
		</li>
	</ul>
</section>