- Skip to main content
- Skip to "About this site"

# Data Inview

- Documentation
- Questions or comments?

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

## Conditional bar 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 (with `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>

## CSS transition example

### List of supported CSS transition

- `class="pop"`
- `class="fade"`
- `class="slide"`
- `class="slidefade"`
- `class="slidevert"`

Reverse the transition by adding the `reverse` class with the CSS transition.

### 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 `id="fade-effect"`

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

### Section that fades in/out `id="fade-effect2"`

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

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

The previous section will fade in when this section is partially out of the viewport (with `class="show-none"`).

View state: ``

View code

    <section id="fade-effect2" class="fade bar-demo">
    	<h3 class="no-gutter">Section that fades in/out</h3>
    	...
    </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>
    	...
    </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.

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:
  2014-07-21