materialize-css/jade/page-contents/scrollspy_content.html

Builds Materialize distribution packages

<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">

      <div id="introduction" class="section scrollspy">
        <h4>Introduction</h4>
        <p class="caption">Scrollspy is a jQuery plugin that tracks certain elements and which element the user's screen is currently centered on. Our main demo of this is our table of contents on every documentation page to the right. Clicking on these links will also scroll the page to that element. </p>
      </div>


      <div id="structure" class="section scrollspy">
        <h4>Table of Contents Structure</h4>
        <pre><code class="language-markup">
  &lt;div class="row">
    &lt;div class="col s12 m9 l10">
      &lt;div id="introduction" class="section scrollspy">
        &lt;p>Content &lt;/p>
      &lt;/div>

      &lt;div id="structure" class="section scrollspy">
        &lt;p>Content &lt;/p>
      &lt;/div>

      &lt;div id="initialization" class="section scrollspy">
        &lt;p>Content &lt;/p>
      &lt;/div>
    &lt;/div>
    &lt;div class="col hide-on-small-only m3 l2">
      &lt;ul class="section table-of-contents">
        &lt;li>&lt;a href="#introduction">Introduction&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#structure">Structure&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#initialization">Intialization&lt;/a>&lt;/li>
      &lt;/ul>
    &lt;/div>
  &lt;/div>
        </code></pre>
      </div>


      <div id="initialization" class="section scrollspy">
        <h4>jQuery Plugin Initialization</h4>
        <pre><code class="language-javascript">
  $(document).ready(function(){
    $('.scrollspy').scrollSpy();
  });
        </code></pre>
      </div>


      <div id="options" class="section scrollspy">
        <h4>jQuery Plugin Options</h4>
        <table class="highlight">
          <thead>
            <tr>
                <th>Option Name</th>
                <th>Description</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>scrollOffset</td>
              <td>Offset for centering element when scrolled to. Default: 200</td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>

    <!-- Table of Contents -->
    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#introduction">Introduction</a></li>
            <li><a href="#structure">Structure</a></li>
            <li><a href="#initialization">Intialization</a></li>
            <li><a href="#options">Options</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>