Scrollspy

• Introduction
• Basic Example

Allows updating of navigation targets based on scroll position.

---

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Scrollspy module.

YUI().use(
  'aui-scrollspy',
  function(Y) {
    // code goes here
  }
);

---

Using Scrollspy

Start by adding the markup that you would like to spy:

<div id="navbar" class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li><a href="#first">First</a></li>
    <li><a href="#second">Second</a></li>
    <li><a href="#third">Third</a></li>
  </ul>
</div>

<div id="scrollNode" style="overflow-y: scroll; height: 300px">
  <h4 id="first">First</h4>
  <p>Etiam nulla eruditi eu quo, facer postulant an mea. Eos at legimus deseruisse adipiscing. Amet iriure torquatos ex mei. Sumo purto propriae nam ne, eam ferri diceret deseruisse ea, cum ubique constituam suscipiantur an. Alii brute legendos ut pri, epicuri voluptaria contentiones an eos. Pri ut feugiat ornatus consequuntur, ubique euismod patrioque id duo. Etiam nulla eruditi eu quo, facer postulant an mea. Eos at legimus deseruisse adipiscing. Amet iriure torquatos ex mei. Sumo purto propriae nam ne, eam ferri diceret deseruisse ea, cum ubique constituam suscipiantur an. Alii brute legendos ut pri, epicuri voluptaria contentiones an eos. Pri ut feugiat ornatus consequuntur, ubique euismod patrioque id duo. Etiam nulla eruditi eu quo, facer postulant an mea. Eos at legimus deseruisse adipiscing. Amet iriure torquatos ex mei. Sumo purto propriae nam ne, eam ferri diceret deseruisse ea, cum ubique constituam suscipiantur an. Alii brute legendos ut pri, epicuri voluptaria contentiones an eos. Pri ut feugiat ornatus consequuntur, ubique euismod patrioque id duo.</p>

  <h4 id="second">Second</h4>
  <p>Pri ea diam persius dissentias, simul assentior ut sed. An illum hendrerit ius, pri aeterno nominati delicata at. Usu fugit facer et, nec in vivendo appellantur interpretaris. Petentium euripidis te vim, ex minimum appareat eam. Etiam nulla eruditi eu quo, facer postulant an mea. Eos at legimus deseruisse adipiscing. Amet iriure torquatos ex mei. Sumo purto propriae nam ne, eam ferri diceret deseruisse ea, cum ubique constituam suscipiantur an. Alii brute legendos ut pri, epicuri voluptaria contentiones an eos. Pri ut feugiat ornatus consequuntur, ubique euismod patrioque id duo. Etiam nulla eruditi eu quo, facer postulant an mea. Eos at legimus deseruisse adipiscing. Amet iriure torquatos ex mei. Sumo purto propriae nam ne, eam ferri diceret deseruisse ea, cum ubique constituam suscipiantur an. Alii brute legendos ut pri, epicuri voluptaria contentiones an eos. Pri ut feugiat ornatus consequuntur, ubique euismod patrioque id duo.</p>

  <h4 id="third">Third</h4>
  <p>Etiam nulla eruditi eu quo, facer postulant an mea. Eos at legimus deseruisse adipiscing. Amet iriure torquatos ex mei. Sumo purto propriae nam ne, eam ferri diceret deseruisse ea, cum ubique constituam suscipiantur an. Alii brute legendos ut pri, epicuri voluptaria contentiones an eos. Pri ut feugiat ornatus consequuntur, ubique euismod patrioque id duo. Etiam nulla eruditi eu quo, facer postulant an mea. Eos at legimus deseruisse adipiscing. Amet iriure torquatos ex mei. Sumo purto propriae nam ne, eam ferri diceret deseruisse ea, cum ubique constituam suscipiantur an. Alii brute legendos ut pri, epicuri voluptaria contentiones an eos. Pri ut feugiat ornatus consequuntur, ubique euismod patrioque id duo. Etiam nulla eruditi eu quo, facer postulant an mea. Eos at legimus deseruisse adipiscing. Amet iriure torquatos ex mei. Sumo purto propriae nam ne, eam ferri diceret deseruisse ea, cum ubique constituam suscipiantur an. Alii brute legendos ut pri, epicuri voluptaria contentiones an eos. Pri ut feugiat ornatus consequuntur, ubique euismod patrioque id duo.</p>
</div>

Next, create an instance of scrollspy and target the appropriate elements. Navigation elements in the target will change as the user scrolls the scrollNode:

YUI().use(
  'aui-scrollspy',
  function(Y) {
    new Y.Scrollspy(
      {
        scrollNode: '#scrollNode',
        target: '#navbar'
      }
    );
  }
);

---

Configuring Scrollspy

You can also adjust the pixel offset when calculating the scroll position:

YUI().use(
  'aui-scrollspy',
  function(Y) {
    new Y.Scrollspy(
      {
        offset: 50,
        scrollNode: '#scrollNode',
        target: '#target'
      }
    );
  }
);