updates / improves documentation for sticky and slider. clarifies events emmited...

diff --git a/docs/pages/sticky.md b/docs/pages/sticky.md
index b3d42cdae1205925a6a2fa1a4297915415d5068e..b01ebb894ce04af89e8cf96fe8295009cd07d506 100644 (file)
--- a/docs/pages/sticky.md
+++ b/docs/pages/sticky.md
@@ -10,8 +10,17 @@ Add the `.sticky` class and `[data-sticky]` to an element to create something th
 
 ```html
 <div class="columns small-6 right" data-sticky-container>
-  <div class="sticky" data-sticky>
+  <div class="sticky" data-sticky data-margin-top="0">
     <img class="thumbnail" src="assets/img/rectangle-3.jpg">
+    <!-- This sticky element would stick to the window, with a marginTop of 0 -->
+  </div>
+</div>
+
+
+<div class="columns small-6 right" data-sticky-container>
+  <div class="sticky" data-sticky data-anchor="#foo">
+    <img class="thumbnail" src="assets/img/rectangle-3.jpg">
+    <!-- This sticky element would stick to the window for the height of the element #foo, with a 1em marginTop -->
   </div>
 </div>
 ```
@@ -85,8 +94,17 @@ Sometimes you want a sticky nav bar or side nav, this is pretty simple, but does
 ```html
 <div data-sticky-container>
   <div class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%">
-    <div class="title-bar-left"></div>
-    <div class="title-bar-right"></div>
+    <div class="title-bar-left"><!-- Content --></div>
+    <div class="title-bar-right"><!-- Content --></div>
+  </div>
+</div>
+```
+With the minimum markup above, your nav bar will be sticky for the entire page. You could change this up by using anchor points, so it sticks and breaks at important markers on the page. A top anchor point of '1' will make it stick at the top of the page, a bottom anchor of `content:bottom` will make it break at the bottom of your `#content` element. This is useful if you want a sticky nav element, but not for the full length of the page.
+```html
+<div data-sticky-container>
+  <div class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%" data-top-anchor="1" data-btm-anchor="content:bottom">
+    <div class="title-bar-left"><!-- Content --></div>
+    <div class="title-bar-right"><!-- Content --></div>
   </div>
 </div>
 ```

diff --git a/js/foundation.slider.js b/js/foundation.slider.js
index c3fe5e0515952fbe077d2f1a2b189ed839a2ac6b..ddbe8045d292af657eb515fbef165e0e6cf44810 100644 (file)
--- a/js/foundation.slider.js
+++ b/js/foundation.slider.js
@@ -134,6 +134,11 @@
      * @example 'disabled'
      */
     disabledClass: 'disabled',
+    /**
+     * Will invert the default layout for a vertical<span data-tooltip title="who would do this???"> </span>slider.
+     * @option
+     * @example false
+     */
     invertVertical: false
   };
   /**

diff --git a/js/foundation.sticky.js b/js/foundation.sticky.js
index 54655d77a255124b8d46cfa038e75932a40884ab..65cc8ae19ec44a4f3b8df29ce25e0a015c1f2b09 100644 (file)
--- a/js/foundation.sticky.js
+++ b/js/foundation.sticky.js
@@ -274,7 +274,7 @@
                  .css(css)
                  /**
                   * Fires when the $element has become `position: fixed;`
-                  * Namespaced to `top` or `bottom`.
+                  * Namespaced to `top` or `bottom`, e.g. `sticky.zf.stuckto:top`
                   * @event Sticky#stuckto
                   */
                  .trigger('sticky.zf.stuckto:' + stickTo);
@@ -314,7 +314,7 @@
                  .css(css)
                  /**
                   * Fires when the $element has become anchored.
-                  * Namespaced to `top` or `bottom`.
+                  * Namespaced to `top` or `bottom`, e.g. `sticky.zf.unstuckfrom:bottom`
                   * @event Sticky#unstuckfrom
                   */
                  .trigger('sticky.zf.unstuckfrom:' + topOrBottom);