materialize-css/jade/page-contents/scrollfire_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">ScrollFire is a jQuery Plugin that executes callback functions depending on how far into the page you've scrolled. We'll show you how you can use this plugin with many demos and examples.</p>
      </div>


      <div id="initialization" class="section scrollspy">
        <h4>jQuery Plugin Initialization</h4>
        <pre><code class="language-javascript col s12">
  var options = [
    {selector: '.class', offset: 200, callback: customCallbackFunc } },
    {selector: '.other-class', offset: 200, callback: function() {
      customCallbackFunc();
    } },
  ];
  Materialize.scrollFire(options);
        </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>Selector</td>
              <td>The selector for the element that is being tracked.</td>
            </tr>
            <tr>
              <td>Offset</td>
              <td>If this is 0, the callback will be fired when the selector element is at the very bottom of the user's window.</td>
            </tr>
            <tr>
              <td>Callback</td>
              <td>Execute a callback function when the user scrolls to the threshold. It will only be called once. <br /> The callback provides a parameter which refers to the current element selected.</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Demo -->
      <h2 class="header">ScrollFire Demo</h2>
      <p>Scroll through slowly to get sense of what ScrollFire can do for you. This is the ScrollFire code that we have used on this page.</p>
      <pre>
  <code class="language-javascript">
  var options = [</code>
    <code id="call-1" class="language-javascript">{selector: '#staggered-test', offset: 50, callback: function(el) {
      Materialize.toast("This is our ScrollFire Demo!", 1500 );
    } },</code>
    <code id="call-2" class="language-javascript">{selector: '#staggered-test', offset: 205, callback: function(el) {
      Materialize.toast("Please continue scrolling!", 1500 );
    } },</code>
    <code id="call-3" class="language-javascript">{selector: '#staggered-test', offset: 400, callback: function(el) {
      Materialize.showStaggeredList($(el));
    } },</code>
    <code id="call-4" class="language-javascript">{selector: '#image-test', offset: 500, callback: function(el) {
      Materialize.fadeInImage($(el));
    } }</code>
  ];
  Materialize.scrollFire(options);
      </code></pre>
      <ul id="staggered-test">
        <li>
          <h4><a href="#">List Item</a></h4>
          <p>This is a description</p>
        </li>
        <li>
          <h4><a href="#">List Item</a></h4>
          <p>This is a description</p>
        </li>
        <li>
          <h4><a href="#">List Item</a></h4>
          <p>This is a description</p>
        </li>
        <li>
          <h4><a href="#">List Item</a></h4>
          <p>This is a description</p>
        </li>
        <li>
          <h4><a href="#">List Item</a></h4>
          <p>This is a description</p>
        </li>
      </ul>

      <img id="image-test" class="responsive-img" src="https://unsplash.imgix.net/reserve/nE6neNVdRPSIasnmePZe_IMG_1950.jpg?dpr=1.25&fit=crop&fm=jpg&h=700&q=75&w=1050">


    </div>

    <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="#initialization">Initialization</a></li>
            <li><a href="#options">Options</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>

<script>

</script>