Scroll your screen to see the right navigation bar is always present at the top of the visible part of the screen, regardless of the scroll position.

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.

Free Download
Demo & source code  (Release v2016.10.28)


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.


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.