Sticky Any Element On Scroll - jQuery goesSticky
File Size: | 4.24 KB |
---|---|
Views Total: | 648 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A lightweight, simple and performant sticky element plugin that makes any elements (e.x. header navigation, sidebar widget) fixed when scrolling down.
More features:
- Stick the element to the top relative to its parent container.
- Unstick the element when it reaches the bottom of its parent container.
- Custom top offset.
- Compatible with mobile devices.
How to use it:
1. Insert your sidebar widgets into a sidebar container as these:
<header> <nav class="navbar"> <!-- Navbar content --> </nav> </header>
2. Insert jQuery library and the jQuery goesSticky plugin's files into the document.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="goesSticky.js"></script>
3. Make the header navigation fixed when you scroll down the whole body.
$(function(){ $("header").goesSticky({ scope: $("body") }); });
4. Set the offset at which position the element should be fixed.
$(function(){ $("header").goesSticky({ scope: $("body"), offset: $("header").outerHeight() // height of header }); });
This awesome jQuery plugin is developed by mladengorchev. For more Advanced Usages, please check the demo page or visit the official website.