Stkr: Documentation
Getting Started
- Download stkr.zip from GitHub
- Transfer stkr.min.js from the plugin_files folder to your project folder
- Load jQuery CDN and stkr.min.js by inserting the following script tags immediately before your closing body tag:
Make sure your src attribute includes the correct path to the stkr.js file.<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="sticky.js"></script> - Give the desired sticky element an ID.
If you're including multiple sticky elements that will become fixed at different points on the web page, they should each have a unique ID name.<img href="images/parachute.png" id="sticky"><img href="images/parachute.png" id="idName-1"><img href="images/cloud.png" id="idName-2"><img href="images/bird.png" id="idName-3"> - Call the stkr method,
.stkr();, in your JavaScript file. If there are multiple sticky elements on the page, invoke a new jQuery function for each.$('#idName-1').stkr();$('#idName-2').stkr();$('#idName-3').stkr();
Default Settings
By default, the sticky element remains fixed on the top-left corner for the entire length of your web page, with its top and left properties set to 20px.
position: 'fixed',top: 20,left: 20
Customizable Settings
-
Set custom start and end points
- startSticky: A
stringidentifying the name, ID, or class of an HTML element. When the user scrolls to this point, the sticky element becomes fixed on the page.If using an ID as the selector, include the hashtag in the string ('#idName'). If using a class name, include the dot in the string ('.className'). - endSticky: A
stringidentifying the name, ID, or class of an HTML element. This marks the end of the fixed element's designated "sticky zone". If not set, the element will remain fixed for the remaining length of the document.If using an ID as the selector, include the hashtag in the string ('#idName'). If using a class name, include the dot in the string ('.className'). - offsetStick: An
integerthat offsets the point at which the element becomes fixed on the page - offsetUnstick: An
integerthat offsets the point at which the element is no longer fixed on the page.
<section><img src="profile.jpg" id="sticky-profile"></section><section id="about-me">...</section><section>...</section><section id="portflio">...</section><footer>...</footer>
<script>$('#sticky-profile').stkr({startSticky: '#about-me',endSticky: '#portfolio',offsetStick: 500,offsetUnstick: 200});</script> - startSticky: A
Adjust position of fixed element
- stickyPosition: A
stringthat determines where the fixed element is positioned on the page.Accepted Values:'top-left','top-right','bottom-left','bottom-right', or'custom' - top, right, bottom, left: If
'stickyPosition'is set to'custom', adjust the element's'top','right','bottom', and/or'left'properties to place it in the desired position. Accepted Values:Integerif using pixels (e.g.,30) orstringif using percentages (e.g.,'30%').
$('#sticky-profile').stkr({stickyPosition: 'custom',top: '50%',left: 40});Extras
- toggleVisibility: Set to
falseby default. Setting this totruewill make the element disappear from the page when it is not between its designated start and end points. - toggleFade: Applies a fade in/fade out effect on the fixed element as it enters or leaves its designated sticky zone. Set to
falseby default. You can adjust the duration of the effect by applying a CSStransitionto the sticky element.#sticky {-webkit-transition: opacity 0.2s;transition: opacity 0.2s;} - Horizontal: Set to
falseby default for vertical scrolling. Change totrueif.stkr()will be triggered by a horizontal scroll.