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.

closed as off-topic by ᔕᖺᘎᕊ, Infinite Recursion, Wrzlprmft, rene, Shadow The Princess Wizard Jun 13 '15 at 22:58

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "The problem described here can no longer be reproduced. Changes to the system or to the circumstances affecting the asker have rendered it obsolete. If you encounter a similar problem, please post a new question." – ᔕᖺᘎᕊ, Infinite Recursion, Wrzlprmft, rene, Shadow The Princess Wizard
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Wouldn't this just result in all the voting buttons piling up on top of each other? – Shog9 Jun 4 '15 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 '15 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. – Jarrod Dixon Jun 6 '15 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 '15 at 15:33
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 .