Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Sticky Situation Reply To: Sticky Situation

#151343
Alen
Participant

The flickering is due to the fact that you are applying fixed positioning, taking the element out of document flow. So the element height is not incorporated when calculating document height. When we take the fixed positioning off, element goes back into the document flow increasing the height; essentially moving the scroll position. Once that happens our else statement evaluates to true (not what we want) making the element go back to fixed position (flicking… or up/down scroll bar).

Solution I came up with is to: get height of fixed element, apply it as padding to wrapping element (adding the excluded height), once the if statement evaluates to true, I remove the padding.

Code can probably be improved. And I bet there’s even better solution. JavaScript is not my forte. Maybe @CrocoDillon can help?