POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/js/affix.html

   1 <div class="bs-docs-section">
   2   <h1 id="affix" class="page-header">Affix <small>affix.js</small></h1>
   3
   4   <h2 id="affix-examples">Example</h2>
   5   <p>The affix plugin toggles <code>position: fixed;</code> on and off, emulating the effect found with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning"><code>position: sticky;</code></a>. The subnavigation on the right is a live demo of the affix plugin.</p>
   6
   7   <hr class="bs-docs-separator">
   8
   9   <h2 id="affix-usage">Usage</h2>
  10   <p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong class="text-danger">In both situations, you must provide CSS for the positioning and width of your affixed content.</strong></p>
  11
  12   <h3>Positioning via CSS</h3>
  13   <p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles, with the exception of <code>position: fixed;</code> on <code>.affix</code>, for these classes yourself (independent of this plugin) to handle the actual positions.</p>
  14   <p>Here's how the affix plugin works:</p>
  15   <ol>
  16     <li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in its top-most position. At this point no CSS positioning is required.</li>
  17     <li>Scrolling past the element you want affixed should trigger the actual affixing. This is where <code>.affix</code> replaces <code>.affix-top</code> and sets <code>position: fixed;</code> (provided by Bootstrap's CSS).</li>
  18     <li>If a bottom offset is defined, scrolling past it should replace <code>.affix</code> with <code>.affix-bottom</code>. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add <code>position: absolute;</code> when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.</li>
  19   </ol>
  20   <p>Follow the above steps to set your CSS for either of the usage options below.</p>
  21
  22   <h3>Via data attributes</h3>
  23   <p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.</p>
  24
  25 {% highlight html %}
  26 <div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  27   ...
  28 </div>
  29 {% endhighlight %}
  30
  31   <h3>Via JavaScript</h3>
  32   <p>Call the affix plugin via JavaScript:</p>
  33 {% highlight js %}
  34 $('#myAffix').affix({
  35   offset: {
  36     top: 100,
  37     bottom: function () {
  38       return (this.bottom = $('.footer').outerHeight(true))
  39     }
  40   }
  41 })
  42 {% endhighlight %}
  43
  44
  45   <h3 id="affix-options">Options</h3>
  46   <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
  47
  48   <div class="table-responsive">
  49     <table class="table table-bordered table-striped js-options-table">
  50       <thead>
  51        <tr>
  52          <th>Name</th>
  53          <th>type</th>
  54          <th>default</th>
  55          <th>description</th>
  56        </tr>
  57       </thead>
  58       <tbody>
  59        <tr>
  60          <td>offset</td>
  61          <td>number | function | object</td>
  62          <td>10</td>
  63          <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
  64        </tr>
  65        <tr>
  66          <td>target</td>
  67          <td>selector | node | jQuery element</td>
  68          <td>the <code>window</code> object</td>
  69          <td>Specifies the target element of the affix.</td>
  70        </tr>
  71
  72       </tbody>
  73     </table>
  74   </div><!-- /.table-responsive -->
  75
  76
  77   <h3 id="affix-events">Events</h3>
  78   <p>Bootstrap's affix plugin exposes a few events for hooking into affix functionality.</p>
  79   <div class="table-responsive">
  80     <table class="table table-bordered table-striped bs-events-table">
  81       <thead>
  82         <tr>
  83           <th>Event Type</th>
  84           <th>Description</th>
  85         </tr>
  86       </thead>
  87       <tbody>
  88         <tr>
  89           <td>affix.bs.affix</td>
  90           <td>This event fires immediately before the element has been affixed.</td>
  91         </tr>
  92         <tr>
  93           <td>affixed.bs.affix</td>
  94           <td>This event is fired after the element has been affixed.</td>
  95         </tr>
  96         <tr>
  97           <td>affix-top.bs.affix</td>
  98           <td>This event fires immediately before the element has been affixed-top.</td>
  99         </tr>
 100         <tr>
 101           <td>affixed-top.bs.affix</td>
 102           <td>This event is fired after the element has been affixed-top.</td>
 103         </tr>
 104        <tr>
 105         <td>affix-bottom.bs.affix</td>
 106           <td>This event fires immediately before the element has been affixed-bottom.</td>
 107         </tr>
 108         <tr>
 109           <td>affixed-bottom.bs.affix</td>
 110           <td>This event is fired after the element has been affixed-bottom.</td>
 111         </tr>
 112       </tbody>
 113     </table>
 114   </div><!-- /.table-responsive -->
 115 </div>