How to Float the SharePoint Quick Launch menu with the location of the scroll bar

Clavin Fernandes

Clavin Fernandes

Related Products

PDF Converter

PDF Converter

Share

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)

FloatingMenuNotice how the Quick Launch menu scrolls with the content

Follow the steps outlined below to implement the changes on your site collection:

  1. Download and install Muhimbi’s SharePoint Infuser on one of your Web Front End Servers.

  2. Ensure you have Designer privileges, more specifically the Add and Customize Pages right.

  3. From the Site Actions / Site Settings screen, select Infuse custom content in the Look and Feel column.

  4. 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.

  5. Click the Save button and navigate to any page that is long enough to have a scroll bar and scroll the window down.

Labels: Articles, JQuery

Author

Clavin Fernandes

Clavin Fernandes

Developer Relations and Support Services @ PSPDFKit

Clavin Fernandes is a Microsoft Business Applications MVP and works in Developer Relations and Support Services for PSPDFKit.

Have a Question?
We’re Always Happy to Help.

© Muhimbi Ltd. 2008 - 2024
This website uses cookies to ensure you get the best experience. Learn more