This time I will share jQuery Plugin and tutorial about Dead Simple Floating Action Button Plugin – jQuery Docked Link, hope it will help you in programming stack.
Docked Link is a really simple jQuery plugin used to create a floating link that will always stay at the center-left or center-right as you scroll down or up the web page. Ideal for sticky action buttons such as social sharing, email subscription, etc.
How to use it:
1. Include the JavaScript file docked-link.js after the latest jQuery library.
1 |
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script> |
2 |
<script src="docked-link.js"></script> |
2. Create the docked link as this. Best practice: place below the fold to avoid visible DOM manipulation.
3. Apply your own CSS styles to the docked link.
04 |
padding: 8px 8px 8px 14px; |
07 |
text-decoration: none; |
10 |
border-top-right-radius: 11px; |
11 |
border-bottom-right-radius: 11px; |
4. Activate the docked link with default settings.
1 |
$('#myLink').dockedLink(); |
5. Set the initial position from the top of the webpage.
1 |
$('#myLink').dockedLink({ |
6. Change the default position of the docked link.
1 |
$('#myLink').dockedLink({ |
Changelog:
2019-05-03
- If the element is invisible, keep it invisible.
This awesome jQuery plugin is developed by mykisscool. For more Advanced Usages, please check the demo page or visit the official website.
