WebUI mobile-first CSS

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

Top

Bottom

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
  });

});