4 ms·

StickyMojo: A contained sticky sidebar plugin for jQuery.

20 points by dberube 14y ago

drharris 14y 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 14y 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.
  - jakechance 14y 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.
  - drharris 14y 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.
  - knewter 14y ago
    theverge is a GREAT example
- jarin 14y 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 14y 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.
    - jarin 14y ago
      It's an extra click
    - knewter 14y ago
      at the bottom...of the infinite scrolling page? whoosh
      - riffraff 14y ago
        no, at the bottom of the window/viewport when scrolling.
  - drharris 14y ago
    Ah, not a fan of endless scrolling either, so that may explain my feelings here. :)
leeoniya 14y ago
not so sure about the "Finally" claim. been using https://github.com/terkel/jquery-floating-widget 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 http://terkel.jp/demo/jquery-floating-widget-plugin.html
- bluetidepro 14y ago
  I'm glad you posted this. You're right, this looks much better. I'll probably use this over the OP's plugin.
tvdw 14y 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.
eli 14y ago
I thought binding to window.scroll was considered bad practice without something like this http://benalman.com/projects/jquery-throttle-debounce-plugin/ http://benalman.com/projects/jquery-throttle-debounce-plugin...
- nilliams 14y ago
  Yes, you're quite right. There's also a light throttle snippet (function.prototype.throttle) here: http://supplementjs.com/ http://supplementjs.com/
  - eli 14y 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.
niekmaas 14y ago
Why is there need for a plugin to do this? Why not use CSS: position: fixed?
- eli 14y 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 14y ago
Can you point me to a page, where I can see the sticky mojo?
- tschultz 14y ago
  http://mojotech.github.com/stickymojo/ http://mojotech.github.com/stickymojo/ Edit: The sidebar containing (Intro, HTML, CSS, Javascript, Download, MOJO) "sticks" to the page as your scroll down
mkmcdonald 14y 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.

20 points by dberube 14y 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 14y 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.
- jakechance 14y 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.
- drharris 14y 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.
- knewter 14y ago
  theverge is a GREAT example
jarin 14y 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 14y 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.
  - jarin 14y ago
    It's an extra click
  - knewter 14y ago
    at the bottom...of the infinite scrolling page? whoosh
    - riffraff 14y ago
      no, at the bottom of the window/viewport when scrolling.
- drharris 14y ago
  Ah, not a fan of endless scrolling either, so that may explain my feelings here. :)

leeoniya 14y ago

not so sure about the "Finally" claim. been using https://github.com/terkel/jquery-floating-widget 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 http://terkel.jp/demo/jquery-floating-widget-plugin.html

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

tvdw 14y 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.

eli 14y ago

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

nilliams 14y ago
Yes, you're quite right. There's also a light throttle snippet (function.prototype.throttle) here: http://supplementjs.com/ http://supplementjs.com/
- eli 14y 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.

niekmaas 14y ago

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

eli 14y 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 14y ago

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

tschultz 14y ago
http://mojotech.github.com/stickymojo/ http://mojotech.github.com/stickymojo/ Edit: The sidebar containing (Intro, HTML, CSS, Javascript, Download, MOJO) "sticks" to the page as your scroll down

mkmcdonald 14y 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.