Sticky votes needs CSS position sticky [closed]

Question

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.

Answer 1

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

Answer 2

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
  });
}