Scrollspy

Trigger events and animations while scrolling your page.

Usage

The scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears the first time in the viewport you can trigger a smooth animation to fade in the element. Just add the data-f-scrollspy attribute and the following options.

Data attribute Description
cls:'MY-CLASS' Applies the class only the first time the element appears in the viewport.
repeat: true Applies the class every time the element appears in the viewport.
delay:600 Adds a delay in milliseconds to the animation.

Typically, classes from the Animation component are used together with the scrollspy.

Examples

This example uses the repeat: true option. Scroll up and down to see the triggered animations.

Fade

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Scale up

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Scale down

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide top

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Markup

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

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

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

Groups

You can also group scrollspy elements, so you won't have to apply the data attribute to each of them. Just add the data-f-scrollspy"{target:'MY-CLASS'}" attribute to a parent container, targetting the selector of its child items. When using a delay it will be applied cumulatively to the items within the row that scrolls into view. The delay will be resetted for the next row within the group when it scrolls into view.

Example

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Example

<div data-f-scrollspy="{cls:'f-animation-fade', target:'.my-class', delay:300}">

	<!-- This item has no delay -->
	<div class="my-class">...</div>

	<!-- This item has a delay of 300ms -->
	<div class="my-class">...</div>

	<!-- This item has a delay of 600ms -->
	<div class="my-class">...</div>

</div>

JavaScript options

This is an example of how to set options via attribute:

data-f-scrollspy="{cls:'f-animation-fade'}"
Option Possible value Default Description
cls string 'f-scrollspy-inview' Class to add when the element is in view.
initcls string 'f-scrollspy-init-inview' Class to add when the element is in view for the first time.
topoffset integer 0 Top offset before triggering in view.
leftoffset integer 0 Left offset before triggering in view.
repeat boolean false Applies the in view class every time the element appears in the viewport.
delay integer 0 Delay time in ms.

Events

You can bind callbacks to following events for custom functionality:

Name Description
init.f.scrollspy Triggered when the element is initially in the viewport.
inview.f.scrollspy Triggered when the element is in the viewport.
outview.f.scrollspy Triggered when the element leaves the viewport.

Example

$('[data-f-scrollspy]').on('inview.f.scrollspy', function(){
	// custom code...
});

Scrollspy Nav

To automatically update the active menu item in a menu depending on the scroll position of your site, just add the data attribute data-f-scrollspy-nav to any navigation. Each menu item must link to the ID of its corresponding part of the site.

Data attribute Description
data-f-scrollspy-nav Triggers the JavaScript necessary for the functionality of the scrollspy nav.
data-f-scrollspy-nav="{closest:'MY-SELECTOR'}" Looks for the closest element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
data-f-scrollspy-nav="{smoothscroll:true}" Applies the Smooth scroll component when skipping between different sections of the site.
data-f-scrollspy-nav="{cls:'MY-CLASS'}" By default ScrollspyNav toggles the f-active class. Use the cls option to use your own class name.

For an example of the scrollspy nav, just check out our Scrollspy test page.

Markup

<ul class="f-nav f-nav-side" data-f-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>

JavaScript options

This is an example of how to set options via attribute:

data-f-scrollspy-nav="{smoothscroll:true}"
Option Possible value Default Description
cls string 'f-active' Class to add to active element
closest CSS selector false Element selector to which to apply the active class
topoffset integer 0 Scroll top-offsset
leftoffset integer 0 Scroll left-offsset
smoothscroll boolean false Scroll animation

Events

Name Parameter Description
init.f.scrollspy event On scrollspy first init
inview.f.scrollspy event Element entered view-port
outview.f.scrollspy event Element left view-port