Float Panel
Float panel is a page element that will automatically switch to position:fixed when needed so that it keeps inside the visible part of the window.
Float Panel can be used to float any elements in your page.
- Plain JavaScript(4kb). jQuery is not required.
- Cross platform and browser support
- Completely FREE to use.
Usage
1. Add script links
<!-- add the link into the head section of the page -->
<script src="float-panel.js"></script>
2. Add Float Panel
<div class="float-panel"></div>
Then you can add any page content into it.
Note:- You can also add class="float-panel" to the target element directly.
- If you want the float panel to always have a space to the top of the screen, you can add the data-top attribute:
<div class="float-panel" data-top="40">...(content)...</div> <!--Then the panel will be 40px off the top of the screen-->
It's done. If you want to make any page content sticky, just wrap it with the Float Panel.
The next tutorial will show how to use the Float Panel to create an animated sticky header on scroll.