Floating Navigation Bar
You've likely seen it while browsing the Internet – a navigation bar that sticks to the top of your screen as you scroll down a page. It ensures the navigation bar is always floating there, waiting to be used.
This can be easily set with the Float Panel script (3kb only).
Demo & Source Code
The demo 4 that you can download from Accordion Menu
1. Add float panel script
<!-- add the link into the head section of the page --> <script src="float-panel.js"></script>
2. Add class="float-panel" to the menu
<div id="accordion" class="float-panel">...(menu code)...</div>
- You can wrap the accordion menu with a float panel rather than setting the menu directly to be a float panel:
<div class="float-panel"> <div id="accordion">...</div> </div>
If you want the float panel to always have a space to the top of the screen, you can add 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 all there is to it.