formstone/docs/json/sticky.json

Library of modular front end components.

{"main":["sticky.js"],"options":[{"name":"maxWidth","type":"string","default":"'Infinity'","description":"Width at which to auto-disable plugin"},{"name":"minWidth","type":"string","default":"'0'","description":"Width at which to auto-disable plugin"},{"name":"offset","type":"int","default":"0","description":"Element offset for activating sticky position"}],"events":[{"name":"passed.sticky","description":"Element passed"},{"name":"stuck.sticky","description":"Element stuck"},{"name":"unstuck.sticky","description":"Element unstuck"}],"methods":[{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.sticky(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").sticky(\"destroy\");"]},{"name":"disable","description":"Disables instance.","examples":["$(\".target\").sticky(\"disable\");"]},{"name":"enable","description":"Enables instance.","examples":["$(\".target\").sticky(\"enable\");"]},{"name":"resize","description":"Updates instance.","examples":["$(\".target\").sticky(\"resize\");"]}],"name":"Sticky","type":"widget","description":"A jQuery plugin for sticky elements.","dependencies":["jQuery","core.js"],"css":[{"name":".fs-sticky-element","type":"element","description":"Target elmement"},{"name":".fs-sticky-clone","type":"element","description":"Cloned elemtn"},{"name":".fs-sticky.fs-sticky-stuck","type":"modifier","description":"Indicates stuck state"},{"name":".fs-sticky-clone.fs-sticky-stuck","type":"modifier","description":"Indicates stuck state"}],"use":"### Basic\n\nSticky will apply fixed positioning to an element as the user scrolls past the original vertical offset:\n\n```javascript\n$(\".sticky\").sticky();\n```\n\n```markup\n<div class=\"sticky\">\n  ...\n</div>\n```\n\n### Offset\n\nAdjust the vertical offset by setting the `offset` option:\n\n```javascript\n$(\".sticky\").sticky({\n  offset: 100\n});\n```\n\n### Container\n\nUse the `data-sticky-container` attribute to define a parent element. The target element will stick to the bottom of the container when completely passed:\n\n```markup\n<div class=\"container\">\n  <div class=\"sticky\" data-sticky-container=\".container\">\n    ...\n  </div>\n</div>\n```\n","demo":"<h4>Basic</h4>\r\n\r\n<!-- START: // FIRSTDEMO -->\r\n\r\n<style>\n  .sticky_container { background: #eee; height: 500px; margin: 50px 0; }\n  .sticky_element { border-radius: 2px; color: white; font-size: 12px; height: 50px; line-height: 50px; overflow: hidden; padding: 0; text-align: center; width: 100%; margin: 10px 0; }\n  .sticky_element.s1 { background: #455a64; z-index: 10; }\n  .sticky_element.s2  { background: #00bcd4; }\n  .sticky_element.s3   { background: #0097A7; }\n\n  .marker {\n    position: fixed;\n    /*top: 50%;*/\n    right: 0;\n    left: 0;\n\n    width: 100%;\n    height: 1px;\n\n    background: red;\n    opacity: 0.2;\n  }\n</style>\n\n<!-- <div class=\"marker\" style=\"top: 120px;\"></div> -->\n\n<script>\nFormstone.Ready(function() {\n  $(\".sticky_element\").on(\"stuck.sticky\", function() {\n    console.log(\"stuck\", this);\n  }).on(\"unstuck.sticky\", function() {\n    console.log(\"unstuck\", this);\n  }).on(\"passed.sticky\", function() {\n    console.log(\"passed\", this);\n  });\n});\n</script>\n\r\n<!-- <div class=\"demo_container\">\n  <div class=\"demo_example\"> -->\n    <div class=\"sticky_element s1 js-sticky\" data-sticky-options='{\"offset\":50}'>Sticky Element</div>\n  <!-- </div>\r\n  <div class=\"demo_code\"> -->\r\n    <pre><code class=\"language-html\">&lt;div class=&quot;sticky&quot;&gt;Sticky Element&lt;/div&gt;</code></pre>\r\n    <pre><code class=\"language-javascript\">$(\".sticky\").sticky({\n  offset: 50\n});</code></pre>\r\n  <!-- </div>\r\n</div> -->\n\r\n<!-- END: // FIRSTDEMO -->\n\n<br><br>\n\n<h3>Container</h3>\n<!-- <div class=\"demo_container\">\n  <div class=\"demo_example\"> -->\n\n    <div class=\"sticky_container sticky_2\">\n      <div class=\"sticky_element s2 js-sticky\" data-sticky-options='{\"offset\":120}' data-sticky-container=\".sticky_2\">Sticky Element</div>\n    </div>\n\n    <div class=\"sticky_container sticky_3\">\n      <div class=\"sticky_element s3 js-sticky\" data-sticky-options='{\"offset\":120}' data-sticky-container=\".sticky_3\">Sticky Element</div>\n    </div>\n\n    <div class=\"sticky_container sticky_4\">\n      <div class=\"sticky_element s2 js-sticky\" data-sticky-options='{\"offset\":120}' data-sticky-container=\".sticky_4\">Sticky Element</div>\n    </div>\n\n    <div class=\"sticky_container sticky_5\">\n      <div class=\"sticky_element s3 js-sticky\" data-sticky-options='{\"offset\":120}' data-sticky-container=\".sticky_5\">Sticky Element</div>\n    </div>\n\n  <!-- </div>\n  <div class=\"demo_code\"> -->\n    <pre><code class=\"language-html\">&lt;div class=&quot;sticky_container&quot;&gt;\n  &lt;div class=&quot;sticky&quot; data-sticky-container=&quot;.sticky_container&quot;&gt;Sticky Element&lt;/div&gt;\n&lt;/div&gt;</code></pre>\n    <pre><code class=\"language-javascript\">$(\".sticky\").sticky({\n  offset: 100\n});</code></pre>\n  <!-- </div>\n</div> -->\n","document":"# Sticky\n\nA jQuery plugin for sticky elements.\n\n<!-- HEADER END -->\n\n<!-- NAV START -->\n\n* [Use](#use)\n* [Options](#options)\n* [Events](#events)\n* [Methods](#methods)\n* [CSS](#css)\n\n<!-- NAV END -->\n\n<!-- DEMO BUTTON -->\n\n<a name=\"use\"></a>\n\n## Using Sticky\n\n\n#### Main\n\n```markup\nsticky.js\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\n```\n\n### Basic\n\nSticky will apply fixed positioning to an element as the user scrolls past the original vertical offset:\n\n```javascript\n$(\".sticky\").sticky();\n```\n\n```markup\n<div class=\"sticky\">\n  ...\n</div>\n```\n\n### Offset\n\nAdjust the vertical offset by setting the `offset` option:\n\n```javascript\n$(\".sticky\").sticky({\n  offset: 100\n});\n```\n\n### Container\n\nUse the `data-sticky-container` attribute to define a parent element. The target element will stick to the bottom of the container when completely passed:\n\n```markup\n<div class=\"container\">\n  <div class=\"sticky\" data-sticky-container=\".container\">\n    ...\n  </div>\n</div>\n```\n\n\n\n<a name=\"options\"></a>\n\n## Options\n\nSet instance options by passing a valid object at initialization, or to the public `defaults` method. Custom options for a specific instance can also be set by attaching a `data-sticky-options` attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `maxWidth` | `string` | `'Infinity'` | Width at which to auto-disable plugin |\n| `minWidth` | `string` | `'0'` | Width at which to auto-disable plugin |\n| `offset` | `int` | `0` | Element offset for activating sticky position |\n\n<hr>\n<a name=\"events\"></a>\n\n## Events\n\nEvents are triggered on the target instance's element, unless otherwise stated.\n\n| Event | Description |\n| --- | --- |\n| `passed.sticky` | Element passed |\n| `stuck.sticky` | Element stuck |\n| `unstuck.sticky` | Element unstuck |\n\n<hr>\n<a name=\"methods\"></a>\n\n## Methods\n\nMethods are publicly available to all active instances, unless otherwise stated.\n\n### defaults\n\nExtends plugin default settings; effects instances created hereafter.\n\n```javascript\n$.sticky(\"defaults\", { ... });\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `object` | `{}` | New plugin defaults |\n\n### destroy\n\nRemoves plugin instance.\n\n```javascript\n$(\".target\").sticky(\"destroy\");\n```\n\n### disable\n\nDisables instance.\n\n```javascript\n$(\".target\").sticky(\"disable\");\n```\n\n### enable\n\nEnables instance.\n\n```javascript\n$(\".target\").sticky(\"enable\");\n```\n\n### resize\n\nUpdates instance.\n\n```javascript\n$(\".target\").sticky(\"resize\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-sticky-element` | `element` | Target elmement |\n| `.fs-sticky-clone` | `element` | Cloned elemtn |\n| `.fs-sticky.fs-sticky-stuck` | `modifier` | Indicates stuck state |\n| `.fs-sticky-clone.fs-sticky-stuck` | `modifier` | Indicates stuck state |\n\n"}