- commit
- 299355e608f92a13e9ae41655a73b3a9b1ac8eae
- parent
- ec3491e1b249af974c8c432155e3caabd554a114
- Author
- leaf corcoran <leafot@gmail.com>
- Date
- 2013-07-31 17:19
write documentation
Diffstat
| M | site/index.html | 93 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++---- |
| M | site/main.scss | 8 | +++++++- |
2 files changed, 94 insertions, 7 deletions
diff --git a/site/index.html b/site/index.html
@@ -1,7 +1,9 @@ 1 1 2 2 <div class="body"> 3 34 -1 <h1>Basic Sticking</h1>-1 4 <h1>Examples</h1> -1 5 -1 6 <h2>Basic Sticking</h2> 5 7 6 8 <div class="example"> 7 9 @@ -15,7 +17,7 @@ no more worrying if a sticky element will accidentally cover your footer. 15 17 <button>Scroll it!</button> 16 18 $markdown{[[ 17 19 ```js18 -1 $(".sidebar").stick_in_parent()-1 20 $("#sidebar").stick_in_parent() 19 21 ``` 20 22 ]]} 21 23 </div> @@ -23,7 +25,7 @@ $(".sidebar").stick_in_parent() 23 25 </div> 24 26 25 2726 -1 <h1>Many Sticky Items</h1>-1 28 <h2>Many Sticky Items</h2> 27 29 28 30 <div class="example"> 29 31 @@ -55,7 +57,7 @@ don't take up the entire height of their parent. 55 57 <button>Scroll it!</button> 56 58 $markdown{[[ 57 59 ```js58 -1 $(".sidebar, .main_column").stick_in_parent()-1 60 $("#sidebar, #main_column").stick_in_parent() 59 61 ``` 60 62 ]]} 61 63 </div> @@ -63,7 +65,7 @@ $(".sidebar, .main_column").stick_in_parent() 63 65 64 66 </div> 65 6766 -1 <h1>Scrollable Sticky Element</h1>-1 68 <h2>Scrollable Sticky Element</h2> 67 69 68 70 <div class="example"> 69 71 $markdown{[[ @@ -76,7 +78,7 @@ sticky element be too tall or the user's resolution too small. 76 78 <button>Scroll it!</button> 77 79 $markdown{[[ 78 80 ```js79 -1 $(".sidebar").stick_in_parent()-1 81 $("#sidebar").stick_in_parent() 80 82 ``` 81 83 ]]} 82 84 </div> @@ -85,7 +87,86 @@ $(".sidebar").stick_in_parent() 85 87 86 88 87 89 -1 90 <h1>Reference</h1> -1 91 $markdown{[[ -1 92 -1 93 Usage: -1 94 -1 95 ```js -1 96 $("#sticky_item").stick_in_parent() -1 97 // or -1 98 $("#sticky_item").stick_in_parent(options) -1 99 ``` -1 100 -1 101 `options` is an optional hash of options to configure how Sticky Kit works. The -1 102 following options are accepted: -1 103 -1 104 * `parent` -- Controls which element will be the parent of the sticky item. The -1 105 dimensions of the parent control when the sticky element sticks and bottoms -1 106 out. Defaults to the closest parent of the sticky element. -1 107 * `inner_scrolling` -- Boolean to enable or disable the ability of the sticky -1 108 element to scroll independently of the scrollbar when it's taller than the -1 109 viewport. Defaults to `true` for enabled. -1 110 * `sticky_class` -- the name of the CSS class to apply to elements when they -1 111 have become stuck. Defaults to `"is_stuck"`. -1 112 -1 113 ### Events -1 114 -1 115 Various events are triggered from a sticky element when its state changes. -1 116 They are: -1 117 -1 118 * `sticky_kit:stick` -- Triggered when element becomes stuck. -1 119 * `sticky_kit:unstick` -- Triggered when element becomes unstuck. (Note: an -1 120 element is still considered stuck when it has bottomed out) -1 121 * `sticky_kit:bottom` -- Triggered when element bottoms out. -1 122 * `sticky_kit:unbottom` -- Triggered when element is no longer bottomed out. -1 123 -1 124 -1 125 For example, if we want to log when an element sticks and unsticks we might do: -1 126 -1 127 ```js -1 128 $("#sticky_item").stick_in_parent() -1 129 .on("sticky_kit:stick", function(e) { -1 130 console.log("has stuck!", e.target); -1 131 }) -1 132 .on("sticky_kit:unstick", function(e) { -1 133 console.log("has unstuck!", e.target); -1 134 }) -1 135 ``` -1 136 -1 137 Sticky kit listens to one event on `document.body`. -1 138 -1 139 * `sticky_kit:recalc` -- trigger this event to cause all sticky elements to be -1 140 recalculated. More information below. -1 141 -1 142 ### Recalculating Sticky Elements 88 143 -1 144 If you're changing the markup of your page on the fly by removing, adding or -1 145 resizing elements then you most likely need to tell Sticky Kit to recalculate -1 146 the sticky elements to guarantee they still in the correct positions. -1 147 -1 148 You can cause a recalculation to happen by triggering an event on the `document.body`: -1 149 -1 150 ```js -1 151 $(document.body).trigger("sticky_kit:recalc") -1 152 ``` 89 153 -1 154 Typically you only need to trigger a recalculation if you are changing the -1 155 positions/sizes of elements above the sticky element, adjacent to it, or the -1 156 sticky element itself. -1 157 -1 158 ### About Columns -1 159 -1 160 If you're familiar with HTML and CSS then you probably know there are a handful -1 161 of different ways to make columns. Sticky kit works automatically with floated -1 162 columns or `inline-block` columns. -1 163 -1 164 ### Browser Support -1 165 -1 166 Sticky Kit works with all modern browsers, and IE7+. -1 167 -1 168 Note: only floated columns work in IE7. -1 169 -1 170 ]]} 90 171 91 172 </div>
diff --git a/site/main.scss b/site/main.scss
@@ -12,7 +12,7 @@ h1 {
12 12 margin: 40px 0;
13 13 }
14 14
15 -1 p {
-1 15 p, ul {
16 16 line-height: 22px;
17 17 margin: 20px 0;
18 18
@@ -24,6 +24,12 @@ p {
24 24 }
25 25 }
26 26
-1 27
-1 28 li {
-1 29 margin: 15px 0;
-1 30 }
-1 31
-1 32
27 33 .body {
28 34 width: $site_width;
29 35 margin-left: auto;