Possibly convert the rules array to be contained within a stylesheet object that has additional media properties.

{
  "stylesheet": [rules],
  "media": "(min-width: 40em)"
}

This functionality might already be in the polyfill, but I was unable to get it working.

As the parent element of an element with position:sticky; approaches the top of the browser viewport (as the user scrolls down), the `position:sticky' element should stop its 'sticky' behavior as the parent element goes out of the viewport.

In the HTML5Rocks demo page, the blue blog headers stop at the bottom of their parent elements.

"polyfill" is taken https://www.npmjs.com/package/polyfill. But it would be nice to see this available as a npm module.

This will be useful for polyfills that rely on each other.

Doesn't work on IE11 of win7.

Should you be passing one object to the constructor? Can't see where a second arg would be used.

  Polyfill({
    declarations:["position:sticky"],
    include: ["position-sticky"]
  })
  .doMatched(doMatched)
  .undoUnmatched(undoUnmatched)

Include:

• Introduction
• Getting started
• Link to Demos
• Testing Info
• Browser Support
• Link to API

Hey,
I thought it would be helpful to add a .stuck class to make it possible to style stuck elements.

I've never really used github before, but seeing as I got it working with only one line, I don't think its worth doing a pull/fork/push whatever its supposed to be.

Anyway, after line 38 in polyfill.position-sticky.js, add

    $(data.$clone).addClass('stuck')

then you can style the element with .element.stuck {

It's not a perfect solution due to the way the polyfill works, but it works for small effects.

Thanks,
euan.

This can probably be accomplished by adding an additional <style> element afterward, duplicating the selectors, and simply replacing the occurrences of these units with their pixel equivalents.

The v[x] units will need to update on window.resize.

Remaining tasks:

• Combine keywords and options into a single parameter for Polyfill()
• Add Google Analytics to all demo pages
• Check the docs and demo pages in old IE
• Add content to local-link demo
• Final proof of everything

I'm trying to implement a sticky navigation that gets stuck below the WordPress admin bar, rather than appearing underneath it. The solution to this is simple:

.navigation_container.-sticky {
    position: sticky;
    top: 0;
    width: 100% !important; // polyfill miscalculates, should always be 100%
}

@media screen and (min-width: 601px) {
    .admin-bar .navigation_container.-sticky {
        top: 46px;
    }
}

@media screen and (min-width: 783px) {
    .admin-bar .navigation_container.-sticky {
        top: 32px;
    }
}

Unfortunately, this doesn't appear to work. It always thinks top:0; is what should be set. I'm not sure if this is due to the added .admin-bar class, making it think that it's an entirely different stuck element, or if it's simply that I'm trying to change the top property at all.

In this use case, where I just want it to be stuck to the top of the body element, it doesn't make sense to add an inline style for top at all, preferably there should be a way to override that.

I'm using Dojo Toolkit's dijit/Editor which is a rich-text editor, with its content contained within an iframe. I have added dynamically various scripts/stylesheets to the iframe, but I also need to run polyfill against it, and unfortunately Dojo gives the iframe a src attribute of "javascript:*". This means that any CSS script loading fails as a cross-domain request.
Would it be possible to add an extra parameter (perhaps "stylesheetContents") to the initial options, that would then cause the program to check for provided stylesheet content, prior to attempting a (potentially) XSS attempt to retrieve them?
I will fork the project and try and find the time to implement this in the fork.

Hi,
We've just got to the bottom of a strange bug in Chrome on iOS 6 (i know, who uses that, its not even a proper browser as it uses WebViews etc!). The page just hangs and crashes the browser when polyfill.js is included. We've removed polyfill.js and the page loads fine. We use requirejs to load everything too.