Stick Elements To A Certain Container - stickOnScroll
File Size: | 26 KB |
---|---|
Views Total: | 933 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Yet another jQuery Sticky On Scroll plugin which helps you quickly create sticky header navigation and/or sidebar widgets on the webpage.
The plugin detects the scroll event, loops through a list of elements that need to be stuck and then makes the matched element(s) stick to the top of the viewport (or a specific container, e.g. parent container).
How to use it:
1. To get started, include both jQuery library and the stickOnScroll plugin at the bottom of the web page.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="jquery.stickOnScroll.js"></script>
2. Attach the function stickOnScroll
to the desired element. The data-stickyType attribute is used to specify the sticky type:
- window: stick the element to the top of the webpage.
- element: stick the element to a given container element. Use
data-stickonscroll
attribute to specify the target container element.
<div id="menu" data-stickyType="window"> ... content here ... </div>
<div id="menu" data-stickonscroll="menu" data-stickyType="element"> ... content here ... </div>
$("#menu").stickOnScroll();
3. Set the top/bottom offset for sticky elements.
$("#menu").stickOnScroll({ topOffset: 0, bottomOffset: 5 });
4. Customize the footer element at which point the plugin disables the Sticky behavior.
$("#menu").stickOnScroll({ footerElement: $("footer") });
5. Specify the element in which you want to track the scroll event.
$("#menu").stickOnScroll({ viewport: window });
6. Customize the CSS class which will be appended to the Sticky element.
$("#menu").stickOnScroll({ stickClass: 'stickOnScroll-on' });
7. Determine whether or not to automatically set the height of the parent element.
$("#menu").stickOnScroll({ setParentOnStick: false });
8. Determine whether or not to automatically maintain the width when the element become Sticky.
$("#menu").stickOnScroll({ setWidthOnStick: false });
9. Available callback functions which will be triggered when the element gets/lost Sticky.
$("#menu").stickOnScroll({ onStick: function(el){ // do something }, onUnStick: function(el){ // do something } });
This awesome jQuery plugin is developed by purtuga. For more Advanced Usages, please check the demo page or visit the official website.