Anthony McLin

JQuery lockScroll 1.3

Shortly after creating my JQuery LockScroll plugin, I was given a site design to implement that happened to require that functionality. Talk about fortuitous circumstance! However, an extra wrinkle existed in the site design. Not only did an element need to switch states between fixed and scrollable, but at another point while scrolling down the page, it needed to change contents as well. This could easily be achieved by using the LockScroll plugin twice on the element with different offsets... but I needed some way of distinguishing the 3 different possible states caused by doing this. The best way of doing this was by toggling classes, which the plugin now does. Read on for details of what's new.

So here's an updated version of JQuery LockScroll.

New in v 1.3:

  • Now CSS classes let you different states of the scroll-locked element, lockScrollOn and lockScrollOff
  • New option classState lets you provide your own classes for the scroll-locked element state instad of the defaults.
  • New option modifyPosition: true/false lets you disable the position: absolute/fixed toggle in case you want to rely entirely on your own CSS to achieve your effects.


If you're going to use the lockScroll plugin on the same element more than one time (so you can do different things at different points of the page) then the second time you call lockScroll, you'll want to use both of the new options. If you don't the two instances of lockScroll are likely to interfere with each other in undesirable ways. By setting modifyPosition:false, and providing an alternate set of classes for the second instance of lockScroll, you get the ability to mix and match states to achieve some very complex behaviors. 2 instances of lockScroll, with 2 states each gives you a total of 4 possible variations on your element. Each time you add lockScroll to mark another position, the number of total variations for your target element doubles!

Using JQuery lockScroll

This requires JQuery (duh!), and other than the new features, usage is identical to version 1.2.1. In fact, you can safely overwrite older installations with no compatibility issues. The download includes a functional demo.

View Demo Online

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

Categories: 

Comments

Anthony, this plugin is great, thank you. May I possibly suggest a new feature? Could you allow for elements that are not position:fixed to begin with (elements that are below the fold for example) so when they come into view, they are positioned by your plugin, then 'un-positioned' when they hit the triggerElement? The effect I'm looking for can be seen at http://imakewebthings.github.com/jquery-waypoints/sticky-elements/

- Zander Martineau (not verified)

Zander, if you comment out the line in my script that checks for fixed position, and then use my plugin twice on your element, you should be able to achieve what you're trying to do.

Here's an example where the plugin was used twice on the same element to create 3 states. Pay attention to the logo behavior.

- Anthony McLin

Ah cool, thanks Anthony. I didn't realise it could be called twice.

One thing that I'm not sure about is if the element sits below the fold, would your plugin still work?

- Zander (not verified)

I haven't tested it with a non-fixed element below the fold, but I don't see why it wouldn't work as long as you disable the check for fixed.

- Anthony McLin

Add new comment