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

Builds Materialize distribution packages

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

    <div class="col s12 m9 l10">

      <div id="initialization" class="section scrollspy">
        <h4>Introduction</h4>
        <p class="caption">Pushpin is our fixed positioning plugin. Use this to pin elements to your page during specific scroll ranges. You can check out our live example: the fixed table of contents on the right. </p>

        <h4>jQuery Plugin Initialization</h4>
        <pre><code class="language-javascript col s12">
  $(document).ready(function(){
    $('.tabs-wrapper .row').pushpin({ top: $('.tabs-wrapper').offset().top });
  });
        </code></pre>
      </div>

      <div id="classes" class="section scrollspy">
        <h4>CSS Classes</h4>
        <p class="caption">A pushpinned element has 3 states. One above and below the scrolling threshold, and the pinned state where the element becomes fixed. Because pushpin changes positioning, chances are your element will look different when the states change. Use these css classes to correctly style your 3 states.</p>
        <pre><code class="language-css col s12">
  // Class for when element is above threshold
  .pin-top {
    position: relative;
  }

  // Class for when element is below threshold
  .pin-bottom {
    position: relative;
  }

  // Class for when element is pinned
  .pinned {
    position: fixed !important;
  }
        </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>Top</td>
              <td>The distance in pixels from the top of the page where the element becomes fixed. (Default: 0)</td>
            </tr>
            <tr>
              <td>Bottom</td>
              <td>The distance in pixels from the top of the page where the elements stops being fixed. (Default: Infinity)</td>
            </tr>
            <tr>
              <td>Offset</td>
              <td>The offset from the top the element will be fixed at. (Default: 0)</td>
            </tr>
          </tbody>
        </table>

        <br />
        <h4>Removal</h4>
        <p>To remove the pushpin from an element, pass in <code class="language-javascript">'remove'</code> as the option to the pushpin function</p>
        <pre><code class="language-javascript">
  //Removes pushpin and pushpin classes
  $('.tabs-wrapper .row').pushpin('remove');
        </code></pre>

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

  </div>
</div>