stickybits
Advanced tools
stickybits - npm Package Compare versions
Comparing version 1.0.1 to 1.0.2
| /** | ||
| * stickybits - Stickybits is a lightweight (<2KB) alternative to `position: sticky` polyfills | ||
| * @version v1.0.1 | ||
| * @version v1.0.2 | ||
| * @link https://github.com/dollarshaveclub/stickybits#readme | ||
@@ -5,0 +5,0 @@ * @author Jeff Wainwright <jjwainwright2@gmail.com> |
| /** | ||
| * stickybits - Stickybits is a lightweight (<2KB) alternative to `position: sticky` polyfills | ||
| * @version v1.0.1 | ||
| * @version v1.0.2 | ||
| * @link https://github.com/dollarshaveclub/stickybits#readme | ||
@@ -5,0 +5,0 @@ * @author Jeff Wainwright <jjwainwright2@gmail.com> |
| { | ||
| "name": "stickybits", | ||
| "version": "1.0.1", | ||
| "version": "1.0.2", | ||
| "description": "Stickybits is a lightweight (<2KB) alternative to `position: sticky` polyfills", | ||
@@ -5,0 +5,0 @@ "main": "dist/stickybits.js", |
@@ -29,3 +29,3 @@ <p align="center"> | ||
| - does not have the _jumpiness_ that plugins that are built around `position: fixed` have because it tries to support `position: sticky` first. | ||
| - in its simpliest usecase, a `scroll` event listener will not be used if `position: sticky` is supported. | ||
| - in its simplest use case, a `scroll` event listener will not be used if `position: sticky` is supported. | ||
| - it is super simple & lightweight (2kb minified) | ||
@@ -69,3 +69,3 @@ | ||
| ``` | ||
| #### By default a selected stickybits element will: | ||
| #### By default, a selected stickybits element will: | ||
| - Stick elements to the top of the viewport when scrolled to vertically. | ||
@@ -80,4 +80,6 @@ - Stick elements at the bottom of their parent element when scrolled past. | ||
| If the `useStickyClasses` argument is set to `true` then even if a browser supports `position: sticky`, StickyBits will still add a `scroll` event listener for adding or removing CSS Classes. This option is available so that CSS styles can be added when StickyBits become sticky. | ||
| If the `useStickyClasses` argument is set to `true` then even if a browser supports `position: sticky`, StickyBits will still add a `scroll` event listener to [add and remove sticky CSS Classes](#notes). This option is available so that CSS styles can use when StickyBits elements become sticky or stuck at the bottom of their parent. | ||
| To use `useStickyClasses`: | ||
| ```javascript | ||
@@ -87,4 +89,15 @@ stickybits('selector', {useStickyClasses: true}); | ||
| View [add css classes](#notes) for more information how to style based on StickyBit CSS Classes. | ||
| Then, in css you can do: | ||
| ```css | ||
| .some-sticky-element .js-is-sticky { | ||
| background-color: red; | ||
| } | ||
| .some-sticky-element .js-is-stuck { | ||
| background-color: green; | ||
| } | ||
| ``` | ||
| View [add css classes](#notes) for more information on StickyBits CSS Classes. | ||
| <h2 id="options">Options</h2> | ||
@@ -94,8 +107,10 @@ | ||
| By default, a StickyBit element will stick to the top of the viewport when vertically scrolled to. | ||
| By default, a StickyBits element will stick to the top of the viewport when vertically scrolled to. | ||
| To have a StickyBit not have the inline css property `top` style: | ||
| Stickybits loosely works for `bottom` positioning as well. | ||
| To have a StickyBits element stick to the `bottom`: | ||
| ```javascript | ||
| stickybits('selector', {customVerticalPosition: true}); | ||
| stickybits('selector', {verticalPosition: 'bottom'}); | ||
| ``` | ||
@@ -105,5 +120,5 @@ | ||
| By default, a StickyBit element will have a `0px` sticky layout offset. This means that if the element will sticky to the top of the viewport by default. | ||
| By default, a StickyBits element will have a `0px` sticky layout top offset. This means that the element will stick flush to the top of the viewport. | ||
| To have a stickyBit stick with a `20px` offset to its vertical layout position: | ||
| To have a StickyBits element stick with a `20px` offset to its vertical layout position: | ||
@@ -114,3 +129,3 @@ ```javascript | ||
| For jQuery and Zepto support, read [below](#jquery). | ||
| For jQuery and Zepto support, read in the jQuery notes [below](#jquery). | ||
@@ -134,11 +149,11 @@ <h2 id="examples">Examples</h2> | ||
| 3 CSS classes will be added or removed by Stickybits if `position: sticky` is not supported or if the `useStickyClasses: true` option is added to the plugin call. | ||
| 3 CSS classes will be added and removed by Stickybits if `position: sticky` is not supported or if the `useStickyClasses: true` option is added to the plugin call. | ||
| - `js-is-sticky` if the selected element is sticky. | ||
| - `js-is-stuck` if the selected element is stopped at the bottom of its parent. | ||
| - `js-stickybit-parent` so that styles can easily be added to the parent of a Stickbit | ||
| - `js-stickybit-parent` so that styles can easily be added to the parent of a Stickybits element | ||
| ### Not a Polyfill | ||
| We strayed away from calling Stickybits a Shim or Polyfill for `position: sticky` because full support would require more code. This plugin simply makes elements vertically sticky very similarly to `position: sticky`. Read more about position sticky [here](https://developer.mozilla.org/en-US/docs/Web/CSS/position) or follow its browser implementation [here](http://caniuse.com/#search=sticky). | ||
| We strayed away from calling Stickybits a Shim or Polyfill for `position: sticky` because full support would require more code. This plugin simply makes elements vertically sticky very similarly to `position: fixed` but in a `sticky` sort of way. Read more about position sticky [here](https://developer.mozilla.org/en-US/docs/Web/CSS/position) or follow its browser implementation [here](http://caniuse.com/#search=sticky). | ||
@@ -150,3 +165,3 @@ <h3 id="jquery">jQuery and Zepto Usage</h3> | ||
| ```javascript | ||
| $('selector').sticybits(); | ||
| $('selector').stickybits(); | ||
| ``` | ||
@@ -157,3 +172,3 @@ | ||
| ```javascript | ||
| $('selector').sticybits({useStickyClasses: true}); | ||
| $('selector').stickybits({useStickyClasses: true}); | ||
| ``` | ||
@@ -164,3 +179,3 @@ | ||
| ```javascript | ||
| $('selector').sticybits({customVerticalPosition: true}); | ||
| $('selector').stickybits({customVerticalPosition: true}); | ||
| ``` | ||
@@ -171,3 +186,3 @@ | ||
| ```javascript | ||
| $('selector').sticybits({stickyBitStickyOffset: 20}); | ||
| $('selector').stickybits({stickyBitStickyOffset: 20}); | ||
| ``` | ||
@@ -174,0 +189,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.5%
23498
- Number of lines in readme file
- increased by9.04%
181
No dependency changes