fixed-sticky
fixed-sticky copied to clipboard
Polyfill Chrome update bug
I'm using the polyfill and I have an element which should stick to the top of the page. The element has following CSS styles.
top: 0;
bottom: auto;
The element sticks to the top of the page correctly, but when scrolling the page back up it doesn't unstick properly and the polyfill updates the fixedsticky-off
class only when I have scrolled the page all the way up.
I can reproduce this issue also on the test page at http://filamentgroup.github.io/fixed-sticky/demos/demo-opt-out-native.html
This seems to happen, because the jQuery css method returns the computed value in Chrome if the element is visible. So even I have CSS declaration bottom: auto
in my element the css('bottom')
returns 0px
in Chrome whereas it returns auto
with Firefox. Thus the polyfill gets confused and thinks the element sticks to both top and bottom.
This bug can be solved with a rather simple trick of hiding the element, reading styles and then restoring the original display value of the element.
In the version 0.1.7 inside if( !position )
block on line 84 I added the following two lines of code.
var originalDisplay = $el.css( 'display' );
$el.css( 'display', 'none' );
Then at the end of the block on line 105 I added this line of code to restore the original display value to the element.
$el.css( 'display', originalDisplay );
After these changes the polyfill seems to work correctly also in Chrome.
There were no issues at all when using the native position: sticky
, but I want to specifically use the polyfill as I want to define different styles to an element which is stuck. At the moment browsers do not provide :stuck
pseudo class or any other way to change styles of a stuck element.