Media WebUI

Classes

The following table describes the classes available in WebUI for scrollspy.

Scrollspy Classes

Class
Description
scrollspy
Defines a scrollspy target element.

Data Attributes

Attribute
Description
data-scrollspy
Specifies the target element that will be scrolled to.

Settings

Setting
Description
activatorSelector
Specifies the CSS selector for scrollspy activators relative to the scrollspy root container element.
Example: "div > div > a"
activatorActiveClass
The CSS class that will be toggled on the scrollspy activator when targets are scrolled in and out of view.
scrollTargetClass
The CSS class present on the scrollspy targets.
scrollTargetOffset
The offset in pixels before a target is considered to be in view.
activatorCallback
A callback function called when a scrollspy activator is triggered.

Useage

In the following example, observe the link active color change as you scroll the page up and down.

Example
Markup
<section class="scrollspy-section text" id="scrollspySection1"></section>
<section class="scrollspy-section text" id="scrollspySection2"></section>

<div id="exampleMenu">
  <div class="table-row text-sm col-padding-md">
    <div class="table-col">
      <a href="#scrollspyTop" class="color-dark color-info color-hover-info" data-scrollspy="#scrollspySection1">Top</a>
    </div>
    <div class="table-col">
      <a href="#scrollspyBottom" class="color-dark color-hover-info" data-scrollspy="#scrollspySection2">Bottom</a>
    </div>
  </div>
</div>
Script
webui.ready(function() {

  ui("#exampleMenu").scrollspy({ 
    activatorSelector: "div > div > a",
    activatorActiveClass: "color-info",
    scrollTargetClass: "scrollspy-section",
    scrollTargetOffset: 50,
    activatorCallback: null
  });

});