StickyMojo: A contained sticky sidebar plugin for jQuery. (opens in new tab)

(mojotech.github.com)

20 pointsdberube13y ago22 comments

22 comments

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.

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

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

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

knewter13y ago

theverge is a GREAT example

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

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

2 more replies

drharris13y ago

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

leeoniya13y 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

bluetidepro13y ago

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

eli13y ago

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

nilliams13y ago

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

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

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

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

niekmaas13y ago

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

eli13y 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."

snambi13y ago

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

tschultz13y ago

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

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

j / k navigate · click thread line to collapse

22 comments

drharris13y ago

bluetidepro13y ago

drharris13y ago

jakechance13y ago

knewter13y ago

theverge is a GREAT example

jarin13y ago

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

2 more replies

drharris13y ago

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

leeoniya13y ago

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

bluetidepro13y ago

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

eli13y ago

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

nilliams13y ago

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

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

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

tvdw13y ago

niekmaas13y ago

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

eli13y ago

snambi13y ago

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

tschultz13y ago

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

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

j / k navigate · click thread line to collapse