jmshal · May 15, 2018 01:54 · Jan 3, 2017 · Jan 3, 2017 · Jan 3, 2017 · Jan 3, 2017
diff --git a/README.md b/README.md
@@ -46,6 +46,15 @@ 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
diff --git a/README.md b/README.md
@@ -2,6 +2,14 @@
 
 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.
@@ -28,7 +36,13 @@ win = new BrowserWindow({
 });
 ```
 
-Now all you need to do is import the `sticky-shim.js` file, and add the `sticky-shim` class to any elements which have the `position: sticky` css rule applied.
+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.
 

diff --git a/README.md b/README.md
@@ -2,8 +2,6 @@
 
 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.
 
-Before going any further, this is to be used only with Electron.
-
 ## How do I use it?
 
 You will need to enable the `position: sticky` flag/blink feature in order for this to work.

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# sticky-shim
+# 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.
 

diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "electron-sticky-shim",
+  "version": "0.0.0",
+  "main": "sticky-shim.js"
+}
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 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.
 
-Before going any further, this is to be used only in Electron.
+Before going any further, this is to be used only with Electron.
 
 ## How do I use it?
 

diff --git a/README.md b/README.md
@@ -30,7 +30,9 @@ win = new BrowserWindow({
 });
 ```
 
-Now all you need to do is import the `sticky-shim.js` file, and add the `sticky-shim` class to any elements which have the `position: sticky` css rule applied. 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.
+Now all you need to do is import the `sticky-shim.js` file, and add the `sticky-shim` class to any elements which have the `position: sticky` css rule applied.
+
+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.
 
 ## License
 

diff --git a/README.md b/README.md
@@ -30,4 +30,8 @@ win = new BrowserWindow({
 });
 ```
 
-Now all you need to do is import the `sticky-shim.js` file, and add the `sticky-shim` class to any elements which have the `position: sticky` css rule applied. 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.
+Now all you need to do is import the `sticky-shim.js` file, and add the `sticky-shim` class to any elements which have the `position: sticky` css rule applied. 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.
+
+## License
+
+WTFPL - http://www.wtfpl.net/txt/copying
diff --git a/README.md b/README.md
@@ -30,4 +30,4 @@ win = new BrowserWindow({
 });
 ```
 
-Now all you need to do is import the `sticky-shim.js` file, and add the `sticky-shim` class to any elements which have the `position: sticky` css rule applied. The shim does not automatically add `position: sticky`, this is so when Electron does support it natively, you can simply remove the shim and the shim class, and all should work as intended.
+Now all you need to do is import the `sticky-shim.js` file, and add the `sticky-shim` class to any elements which have the `position: sticky` css rule applied. 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.
diff --git a/README.md b/README.md
@@ -0,0 +1,33 @@
+# 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.
+
+Before going any further, this is to be used only in Electron.
+
+## 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 the `sticky-shim.js` file, and add the `sticky-shim` class to any elements which have the `position: sticky` css rule applied. The shim does not automatically add `position: sticky`, this is so when Electron does support it natively, you can simply remove the shim and the shim class, and all should work as intended.
diff --git a/sticky-shim.js b/sticky-shim.js
@@ -0,0 +1,8 @@
+window.addEventListener('scroll', (event) => {
+  const stickyShim = event.target.querySelector('.sticky-shim');
+  if (stickyShim) {
+    stickyShim.style.position = 'relative';
+    stickyShim.offsetHeight;
+    stickyShim.style.position = '';
+  }
+}, true);