StickyMojo: A contained sticky sidebar plugin for jQuery.

StickyMojo: A contained sticky sidebar plugin for jQuery.(mojotech.github.com)

20 points by dberube 13 years ago | 22 comments

drharris 13 years ago |

Can any UX people illuminate the modern popularity of these things? I find them very distracting, and typically unusable. When I'm scrolling down the page, the function I'm performing is consumption of content. With a sidebar there begging me to click away (or worse, display ads and social media junk), it considerably reduces my desire to perform this function. It just reminds me of the Java applets in 1996 for sidebar buttons.

bluetidepro 13 years ago | |

I think there is value in these types of sticky sidebars when they are used in the correct way. The correct way is when the sticky sidebar is a key of some sort. Links that jump around the current article for quick jumping. However, I agree, I can't stand when sites use these for ads or social media junk.

drharris 13 years ago | | |

That's an excellent point. The sidebar on railstutorial.org is quite functional, and aside from some bright social icons not very distracting. I think that is the perfect use case for a sticky sidebar, navigation or additional information related to the actual body text. I guess I just see it used more as a new sidebar, basically emulating what framesets did for us back in the 90s.

jakechance 13 years ago | | |

I agree that it all comes down to usage and content of the site. If the developer of the site uses something like this correctly to present always present useful information or links to the user, then they're great additions.

knewter 13 years ago | | |

theverge is a GREAT example

jarin 13 years ago | |

It's very useful for top-level navigation when using the "infinite scrolling" that seems to be so popular these days. It makes it so you don't have to scroll all the way back up when you're 10 pages deep.

riffraff 13 years ago | | |

how does this compare to having a "to top" button on the bottom of the page which appears when scrolling?

I mean, I understand the difference between showing actual actions or giving more space to content, but I'd like to know of some real studies on it.

drharris 13 years ago | | |

Ah, not a fan of endless scrolling either, so that may explain my feelings here. :)

leeoniya 13 years ago |

not so sure about the "Finally" claim. been using https://github.com/terkel/jquery-floating-widget for a while, it also has the ability to stop floating when past a certain container's bottom edge. it's also much lighter weight.

demo: http://terkel.jp/demo/jquery-floating-widget-plugin.html

bluetidepro 13 years ago | |

I'm glad you posted this. You're right, this looks much better. I'll probably use this over the OP's plugin.

eli 13 years ago |

I thought binding to window.scroll was considered bad practice without something like this http://benalman.com/projects/jquery-throttle-debounce-plugin...

nilliams 13 years ago | |

Yes, you're quite right. There's also a light throttle snippet (function.prototype.throttle) here: http://supplementjs.com/

eli 13 years ago | | |

Neat, thanks for that link. I'm not a full time JS developer and I always feel like I'm a few steps behind everyone else.

mkmcdonald 13 years ago |

UserAgent sniffing and Graceful Degradation do not mesh.

This sniffing in particular will fail for Opera 6-8, therefore excluding perfectly capable browsers by a very shallow criterion.

The sniff serves no purpose, and is furthermore based upon a thoroughly disproved anti-pattern.

tvdw 13 years ago |

That page feels extremely sluggish when scrolling... I don't think I'm ever going to use this. And yes I'm using a browser with hardware acceleration intentionally disabled to simulate slower computers.

niekmaas 13 years ago |

Why is there need for a plugin to do this? Why not use CSS: position: fixed?

eli 13 years ago | |

"The problem with a simply "fixed" positioned element is that it doesn't react well to a scroll or window resize. In many cases the sidebar will overlap elements such as the footer or content area. Generally this is not the intended effect."

snambi 13 years ago |

Can you point me to a page, where I can see the sticky mojo?

tschultz 13 years ago | |

http://mojotech.github.com/stickymojo/

Edit: The sidebar containing (Intro, HTML, CSS, Javascript, Download, MOJO) "sticks" to the page as your scroll down