2

I am working on an element that becomes sticky on top of the page once you scroll past. In order to prevent content below it from shifting up, am getting the current height of the parent of the element that's about to be made sticky and adding it as inline style purely for user experience so the user isn't disorientated by things jumping around.

I am wondering if this has added benefit for performance? Does the mere fact of changing element's position cause page reflow or have I prevented page reflow by applying fixed height to the element parent before making the child element sticky?

N8888
  • 670
  • 2
  • 14
  • 20
user1275105
  • 2,643
  • 5
  • 31
  • 45

1 Answers1

2

Does the mere fact of changing element's position cause page reflow

Yes, see What is DOM reflow?. Even if you as the user might not see a difference, the website was repainted.

I am wondering if this has added benefit for performance?

Repaints/reflows are usually quick, especially if you only change a small part of the layout. But what has a much larger influence on the performance is the way you track the scrolling. Historically, this was mostly done by using addEventListener('scroll', /* ... */). However, there is a much better and more performant way of doing the same thing using the IntersectionObserver API. It has reasonable browser support and there is a polyfill.

str
  • 42,689
  • 17
  • 109
  • 127