Electron `position: sticky` shim

README.md

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 for an example.

Installation

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

$ 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...

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

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

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.

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.

<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

package.json

{
  "name": "electron-sticky-shim",
  "version": "0.0.0",
  "main": "sticky-shim.js"
}

sticky-shim.js

window.addEventListener('scroll', (event) => {
  const stickyShim = event.target.querySelector('.sticky-shim');
  if (stickyShim) {
    stickyShim.style.position = 'relative';
    stickyShim.offsetHeight;
    stickyShim.style.position = '';
  }
}, true);