6

When scrolling, .vote.js-vote-sticky gets to be .is-stuck. But that's laggy because it's triggered by JS! :o

It should have position: sticky. It's unacceptable to use a slower, inferior JS technique when there's a CSS alternative. Could the CSS equivalent be added, and optionally the JS used as a fallback for crappy browsers?

… in addition to that, it seems like the JS solution is bugged when zoomed with "pinching" on Safari and flickers sometimes in other situations.

4
  • Wouldn't this just result in all the voting buttons piling up on top of each other?
    – Shog9
    Jun 4, 2015 at 22:46
  • 3
    @Shog No, they will stop being sticky after you scroll far enough that it'd be outside of the nearest ancestor without static position, if I understand it correctly. Here's an example.
    – bjb568
    Jun 4, 2015 at 23:02
  • 1
    Hmm, this doesn't seem to work in Chrome? Testing on Chrome 43.0.2357.81 in Windows 8.1. It's very nice in Firefox, though. Will look at the polyfill linked in this answer tomorrow. Jun 6, 2015 at 5:42
  • I very infrequently recommend a polyfill, but in this case since sticky isn't in a standard, using it anyway could promote fragmentation and weakening of w3 standards. (also for Chrome support)
    – bjb568
    Jun 6, 2015 at 15:33

2 Answers 2

8

It's literally five lines of css:

.votecell .vote {
    top: 0; 
    position: sticky; 
    position: -webkit-sticky;
}

And it works perfectly! It's quick, doesn't extent past the comments, and is completely browser based.

(I came up with this feature request in 2012, and it's great to see that it's being put into use.)

1

I don't want resize event listeners. So I use this userscript:

// Hijack `$.fn.stick_in_parent`
Object.defineProperty($.fn, 'stick_in_parent', {
  set: function() { /* Ignore assignments */ },
  get: function() { return cssSticky;        }
});

// Use CSS instead of JS
function cssSticky(obj) {
  return this.css({
    position: 'sticky',
    top: obj.offset_top
  });
}

Not the answer you're looking for? Browse other questions tagged .