18 Aug 11

I was browsing around, doing some css research, and I stumbled across a really cool effect at CSSWizardry.com. When you scroll down the page, the menu and logo stay fixed. Not a big deal, but the metadata for comments pokes out of the main column and risks overlapping the menu. Watch what happens when the comments section and the menu intersect.

Wow.

Read on to see how I duplicated and enhanced this effect.

Subtle UI effect, but incredibly intuitive and a really expressive enhancement. I decided to dig into the code to see how it was done, and it's pretty simple. The main menu is positioned with position:fixed as you might expect. But using JQuery, they bound a comparison function to the window scroll event. Every time the page scrolls, it checks to see if the comments section is higher than the bottom of the main menu. If so, then it toggles the positioning of the main menu top be position:absolute; If you scroll back down it switches it back.

A really elegant solution, and credits go to Dan Bentley for creating the FixedScroll plugin for JQuery. (Dan if you're reading this, let me know as I'd be more than happy to link to you) I decided to take it a few steps further. I rewrote the JQuery plugin to have a few more features, making it easier to use, and allowing for some more flexibility in various edge conditions.

Check out the attached zip, in it you will find the necessary plugin js, as well as a functional demo using HTML5.

Adding this feature to your site is really easy:

1. Make sure the "locked" element is styled using position:absolute
2. Include the javascript file after you include JQuery. I'm using JQuery 1.6.2 but this should work on earlier versions as well.
3. Attach the lockScroll behavior to your absolutely positioned element. You'll need to specify either the element you want to trigger the change in scrolling behavior or a fixed pixel value beyond which the element scrolls. In the example below nav is the fixed element, and section.user-comment:first is the first of the comments. Of course since this is JQuery, you can use any of their supported selectors to find your elements.
   

   $(document).ready(function() {
     $('nav').lockScroll({
       'triggerElement' : $('section.user-comment:first'), //Use the first comment to trigger the scrolling
     });
   });