Anthony McLin

JQuery lockScroll 1.2.1

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.

Update: Check out the newer JQuery lockScroll v1.3

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
    	});
    });
    

Update: Jquery lockScroll 1.2.1 is now available for download at github.

Categories: 

Comments

Hey! Thanks for your work on improving this plugin. The original one is cool, and your version is, well, even more cool!

However, I'd afford to ask you one more thing: couldn't you upload it to github? It would be much easier to use it and, what's more important, to improve your code that way plus it would protect your work from vanishing in case of your blog's outage (which won't be the case, I hope).

Thanks again for your work!

- Max (not verified)

Thanks for this! I'm going to give it a try!

I'm hoping your lockScroll.js plugin works, doing what I need it to do, but with the one demo, no instructions, and little to go on, I can't know for sure.
Would you consider expanding on the demo files in the project on gitHub?
Thanks,
Al

It's not really a drop-in-and run, best thing to do is check out the source files since the specific implementation will vary depending on what exactly you need to do.

Best thing to look at is the comments in the plugin source code for what the different options do.

- Anthony McLin

Add new comment