This is tough because Instagram's #react-root container div has a z-index of 0. The entire Instagram site has its own z-index stacking context, so nothing outside of that div (the extension) can insert itself above some elements and below others.
One work around solution is hiding the extension once it hits the bar e.g. has a top value of less than 36px.
This PR implements that workaround, and additionally prevents the extension from showing in the first place if a photo is scrolled too far up. The height of the navigation bar is hard-coded, and will have to change if Instagram updates its UI.
This also changes the scroll listener to be passive, so scrolling will be more performant while the extension is enabled.
Fixes #30 and #28.
From issue #30:
This PR implements that workaround, and additionally prevents the extension from showing in the first place if a photo is scrolled too far up. The height of the navigation bar is hard-coded, and will have to change if Instagram updates its UI.
This also changes the scroll listener to be passive, so scrolling will be more performant while the extension is enabled.