matthewp/position--sticky-

Polyfill for position: sticky;

position: sticky; The polyfill!

This shim/polyfill is based on this polyfill, except my version has no dependencies. Yay! Additionally, this polyfill will add a class .stuck when in the sticky position (and remove it when not).

Usage

Simply include the polyfill:

<script src="sticky.js"></script>

And that's it. Simply use CSS as you normally would, for example:

.my-sticky-element {
  position: sticky;
  top: 20px;
}

.my-sticky-element.stuck {
  box-shadow: 0px 4px 13px #8E8E8E;
}

position--sticky-'s Issues

Polyfill the bottom and right cases

Please polyfill the bottom and right positions. According to the actual version of the spec (http://dev.w3.org/csswg/css-position-3/#sticky-positioning), there should work all top,left,bottom and right css rules for positioning and each of them (unfortunately) behaves in its own way.

Race conditions?

Cheers for merging my other PR, but I actually switched to another lib in the end, because I found this had some race conditions and didn’t have time to resolve them :-/

Looks like sometimes in a live env, instances of position: sticky in stylesheets won’t be found?

Stuck class not applied in Firefox

The .stuck functionality does not work in Firefox whatsoever... I can't seem to figure out why. It's as if an event listener is not being added?

Last confirmed working version is 13a935c.

Doesn't like @media selectors when parsing your css.

Hi, sticky throws the following error when I am using @meda tags in my css files. Without them it seems to run like normal.

Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '} @media screen and (max-width: 960px)' is not a valid selector.

Deprecate?

I'm thinking about deprecating this project. It's much more popular than it should be. I needed it for a project I was working on and quickly came up with it, but there are more technically correct polyfills out there (For example this one). What does everyone think, should I update the readme and tell people to use that instead?

Doesn't work for Header Menus well

For an element at the top of a document, such as a header menu, this will never allow it to return to its original state, and will never remove the "stuck" class.

Support cross-domain stylesheets

From my testing a stylesheet that sits on a separate domain from sticky.js will cause the polyfill to fail (in the case of a CDN for example). Is there a way around this? Respond.js's solution to this may provide some inspiration.

Add "stuck" class when position:sticky used

I like how your JS fallback includes a handy .stuck class, activated when the element becomes stuck.

Would be great if this was also added via JavaScript when position: sticky was actually used, would this be possible?

I've also opened a StackOverflow question about this here: http://stackoverflow.com/questions/16302483/event-when-positionsticky-is-triggered

Incompatible with Bootstrap's hidden-iphone class

When I'm at the top of the page:

<div id="sidebar" class="span4 hidden-phone" style="  position: sticky;  top: 40px;  right: 20px; ">

When I scroll down it sticks (good):

<div id="reader-sidebar" class="span4 hidden-phone stuck" style="  position: sticky;  top: 40px;  right: 20px; position:fixed;width:389px;height:347px">

When I scroll down farther, it disappears (bad):

<div id="reader-sidebar" class="span4 hidden-phone" style="  position, sticky;  top, 40px;  right, 20px; position,fixed;width,389px;height,347px">

It looks like two problems happen there. One is that it loses its stuck class and two is that the rules are written with commas in place of colons.

ie8 could not get the position property. invalid argument

When trying to set the position style attribute in IE8 it throws an error as sticky is not a valid value for position in IE8. Using a try catch seems to be a better solution. check my pull request

Missing license declaration

There's no mention about the license for the code. I guess you mean something like "MIT" but it would be wise to say so in the header.

For example, insert after line 3:

 * License: MIT

and you're done.

An invalid or illegal string was specified

Line 89:
var elems = slice.call(document.querySelectorAll(selector));

But why? This is my element:

@media(max-width:767px){ .row .about { position: sticky; } }

Issue with Media Queries

I’ve been trying to get this to work with a project, but the element that I want to position: sticky; is contained inside of a media query.

It seems that, currently, when parsing the CSS it determines that the media query is the CSS selector that needs to be acted upon, rather than the actual CSS selector inside of it.

I’m not sure how best to go about resolving the issue, but thought I’d bring it up here so that smarter people than I can look into it.

Polyfill is active even if the browser supports position: sticky

Maybe add something like this to the start of the function?

var prefixTestList = ['', '-webkit-', '-ms-', '-moz-', '-o-'];
var stickyTestElement = document.createElement('div');

for (var i = 0; i < prefixTestList.length; i++) {
  stickyTestElement.style.position = prefixTestList[i] + 'sticky';
  if (stickyTestElement.style.position != '')
    return;
}

Does not support @import

That wont work:

<style media="all">
  @import url('style.css');
</style>

Fails to update dimensions after browser resize

It works nicely when I scroll, setting position:fixed and hardcoding the width and height. However if I scroll to unstick and then resize the window, the inferred width and height change but those hardcoded values don't.