# electron-sticky-shim

This 8 line shim makes elements with `position: sticky` work as intended in situations where you have scrollable content nested within your app - see [this](https://twitter.com/heyimjacooob/status/816124902453350400) for an example.

## Installation

You can either copy the `sticky-shim.js` file from this gist, or install it as a module using npm...

```sh
$ npm install --save gist:4c7dd81a61adcb648944a16b0fac717f
```

## How do I use it?

You will need to enable the `position: sticky` flag/blink feature in order for this to work.

You can do this by either adding `CSSStickyPosition` to the `blinkFeatures` web preference...

```js
win = new BrowserWindow({
  // ...
  webPreferences: {
    blinkFeatures: 'CSSStickyPosition',
  },
});
```

Or you can enable all of the Chrome experimental features (of which `position: sticky` is one)...

```js
win = new BrowserWindow({
  // ...
  webPreferences: {
    experimentalFeatures: true,
  },
});
```

Now all you need to do is import `electron-sticky-shim` (or manually include the `sticky-shim.js` file), and add the `sticky-shim` class to any elements which have the `position: sticky` css rule applied.

```js
require('electron-sticky-shim');

// ...
```

The shim does not automatically add `position: sticky` to your sticky elements, this is so when Electron does support it natively, you can simply remove the shim and the shim class, and your CSS should work as intended.

```html
<div class="container">
  <div class="sticky-shim" style="position: sticky; top: 0">
    Example
  </div>
  Lorem ipsum...
</div>
```

## License

WTFPL - http://www.wtfpl.net/txt/copying