How to Float the SharePoint Quick Launch menu with the location of the scroll bar
Clavin Fernandes
Another day and another cool example of how the SharePoint user interface can be modified using our free SharePoint Infuser. Today we are using some JavaScript magic to make this carpet … errrr … menu float in the same position while scrolling through a page.
To ensure this new functionality is added to every page in the Site Collection we use Infuser rather than the Content Editor Web Part. The JavaScript code is relatively simple, all it does is hook the scroll event, check if the menu is about to scroll off-screen and then re adjust the ‘top’ of the menu with the position of the scroll bar. Some additional code inserts a place holder element in the space that used to be occupied by the menu to ensure the width of this area doesn’t collapse.
There are more elegant ways to achieve floating effects, but the advantage of this code is that it works in IE6,7,8, FireFox, and Google Chrome. (It really works brilliantly in Chrome, as smooth as it gets)
Notice how the Quick Launch menu scrolls with the content
Follow the steps outlined below to implement the changes on your site collection:
-
Download and install Muhimbi’s SharePoint Infuser on one of your Web Front End Servers.
-
Ensure you have Designer privileges, more specifically the Add and Customize Pages right.
-
From the Site Actions / Site Settings screen, select Infuse custom content in the Look and Feel column.
-
Copy the script at the end of this posting and paste it into Infuser’s code window. If you are using IE then you may want to paste it in WordPad first , otherwise all line breaks are stripped out.
-
Click the Save button and navigate to any page that is long enough to have a scroll bar and scroll the window down.
<!\-\- Load the JQuery Libraries that ship with Infuser -->
<script type="text/javascript" src="/\_layouts/Muhimbi.Infuser/JQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
Floating SharePoint Menu, compatible with IE6,7,8 Chrome, Firefox
Created by www.muhimbi.com, This sample code is provided on an “as is”
basis and without warranty of any kind.
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
var scrollMenuElement = null;
var menuElementTop = 0;
var menuElementWidth = 0;
function scrollMenu()
{
// \\*\\* Initialise during the first scroll event
if(scrollMenuElement == null)
{
// \\*\\* Get the container that holds the navigation menu(s)
scrollMenuElement = $("#LeftNavigationAreaCell > table");
menuElementTop = scrollMenuElement.position().top;
// \\*\\* Request and explicitly specify width for Firefox & Chrome
menuElementWidth = scrollMenuElement.width();
scrollMenuElement.css("width", menuElementWidth);
// \\*\\* put content in the same size of the menu to prevent collapse
scrollMenuElement.before("<div style='width:" \+ menuElementWidth + "px'></div>");
// \\*\\* Switch to absolute positioning to allow floating
scrollMenuElement.css("position", "absolute");
}
var scrollTop = $(document).scrollTop();
// \\*\\* Has the element scrolled out of the window?
if(scrollTop > menuElementTop)
{
scrollMenuElement.css("top", scrollTop +"px");
}
else
{
// \\*\\* Sometimes we scroll in large chunks so make sure it lines up
scrollMenuElement.css("top", menuElementTop +"px");
}
}
jQuery.event.add(window, "scroll", scrollMenu);
</script>
Clavin is a Microsoft Business Applications MVP who supports 1,000+ high-level enterprise customers with challenges related to PDF conversion in combination with SharePoint on-premises Office 365, Azure, Nintex, K2, and Power Platform mostly no-code solutions.
