Problem:
My customer wanted to had a floating menu to the NewForm.aspx page for one of the lists. The floating menu will stay on the top left corner of the page as page scrolls.
Demo:
This was done on our internal website, but it works similar to this post http://css-tricks.com/examples/ScrollingSidebar/
Solution:
After a few searches online, I found it’s often done in HTML using CSS or JavaScript. See the References section for the list of articles I found relating to this feature.
The article worked really well for me is this one. The article talked about how to make the quick launch float, but I changed the div name and works for a normal menu.
Here is how:
1. Go to the article page, download the stickyQL.js file.
2. Open the stickyQL.js file, change
var elem = "#s4-leftpanel";
to
var elem = "#YourFloatingDivID";
3. Save the file in the site collection’s style library. We’ll need to reference the file later.
4. Go to the site and open SharePoint Designer. From the left pane, select Master Pages.
5. Open the v4.master. Find </head>. Add the following lines before </head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="[servername]/Style Library/MyJS/stickyQL.js"></script>
6.Go to the NewForm.aspx page, edit the page and add a new content editor web part.
7. Add the following code to the CEWP’s HTML source.
<div id="sidebar" style="width: 15%; float: left; z-index: 1;">Some text on the floating menu.</div>
8. Click “Stop Editing” to exit editing.
References:
Floating menu in HTML using CSS or JavaScript
Drift Bottle 