Let parent = document.querySelector('.sticky').parentElement Ĭonst hasOverflow = getComputedStyle(parent).overflow Simply copy/paste the following snippet in your browser's web developer console to identify all parent elements with overflow property set to something other than visible: Snippet to Check for Parents With overflow Property Set: If any parent/ancestor of the sticky element has any of the following overflow properties set, position: sticky won't work ( unless you specify a height on the overflowing container):

Make sure you add a vendor prefix for the property value to support versions of Safari below 13, for example, like so:Ĭhecking if an Ancestor Element Has overflow Property Set This threshold value that you set, would make the sticky element act as fixed positioned when it crosses the specified threshold, and a relatively positioned element otherwise. Checking if a Parent Element Is a Flexbox.īefore you check for other issues, it might be a good idea to ensure that you're using a browser that supports position: sticky.Ĭhecking if a Threshold Has Been SpecifiedĪ sticky element requires a threshold to be specified, which means that you must set a value other than ' auto' for at least one of the following properties:.Checking if height Property Is Not Set on Parent.Checking if an Ancestor Element Has overflow Property Set.Checking if a Threshold Has Been Specified.You can check the following list of things to fix some common / potential issues with using it: There could be a number of reasons why the CSS position: sticky property might not be working for you.

Display table cell margin not working