Release v2.0.1 - Add support for requestAnimationFrame

README.md

@@ -25,7 +25,7 @@ Check out some examples:
 
 Your website's HTML structure has to be similar to this in order to work:
 
-```js
+```html
 <div>
     <div class="content">
         <div class="theiaStickySidebar">
@@ -48,7 +48,7 @@ For the above example, you can use the following code:
 
 ### JavaScript
 
-```js
+```html
 <script src="dist/theia-sticky-sidebar.min.js"></script>
 
 <script>
@@ -124,6 +124,7 @@ export const MyComponent = () => {
 | `minWidth`                   | `number`                                      | The sidebar returns to normal if its width is below this value. Useful for responsive designs. Defaults to **0**.                                                                                                                                                |
 | `disableOnResponsiveLayouts` | `boolean`                                     | Try to detect responsive layouts automatically and disable the sticky functionality on smaller screens. More exactly, it detects when the container and the sidebar are moved one on top of the other, instead of showing up side-by-side. Defaults to **true**. |
 | `defaultPosition`            | `string`                                      | The sidebar must have a non-static `position`, as the inner sticky-sidebar uses `position: absolute`. Defaults to **relative**.                                                                                                                                  |
+| `requestAnimationFrame`      | `boolean`                                     | Improve performance by throttling/debouncing multiple scrolling events using `window.requestAnimationFrame`. Defaults to **true**.                                                                                                                               |
 
 ## Development
 

examples/3-columns.html

@@ -6,16 +6,18 @@
         import {TheiaStickySidebar} from '/lib/theia-sticky-sidebar.ts';
         import {testTheiaStickySidebars} from '/lib/test.ts';
 
+        let tss;
+
         document.addEventListener('DOMContentLoaded', function () {
-            new TheiaStickySidebar({
+            tss = new TheiaStickySidebar({
                 elements: '.leftSidebar, .content, .rightSidebar',
                 additionalMarginTop: 30
             });
         });
 
         document.querySelector('#start_test').addEventListener('click', element => {
             element.disabled = true;
-            testTheiaStickySidebars();
+            testTheiaStickySidebars(tss);
         });
     </script>
     <style>

examples/4-columns.html

@@ -6,16 +6,18 @@
         import {TheiaStickySidebar} from '/lib/theia-sticky-sidebar.ts';
         import {testTheiaStickySidebars} from '/lib/test.ts';
 
+        let tss;
+
         document.addEventListener('DOMContentLoaded', function () {
-            new TheiaStickySidebar({
+            tss = new TheiaStickySidebar({
                 elements: '.column',
                 additionalMarginTop: 30
             });
         });
 
         document.querySelector('#start_test').addEventListener('click', element => {
             element.disabled = true;
-            testTheiaStickySidebars();
+            testTheiaStickySidebars(tss);
         });
     </script>
     <style>

examples/bootstrap-v4.html

@@ -10,16 +10,18 @@
             import {TheiaStickySidebar} from '/lib/theia-sticky-sidebar.ts';
             import {testTheiaStickySidebars} from '/lib/test.ts';
 
+            let tss;
+
             document.addEventListener('DOMContentLoaded', function () {
-                new TheiaStickySidebar({
+                tss = new TheiaStickySidebar({
                     elements: 'section.container .col-md-4',
                     additionalMarginTop: 30
                 });
             });
 
             document.querySelector('#start_test').addEventListener('click', element => {
                 element.disabled = true;
-                testTheiaStickySidebars();
+                testTheiaStickySidebars(tss);
             });
         </script>
 

examples/foundation.html

@@ -7,16 +7,18 @@
             import {TheiaStickySidebar} from '/lib/theia-sticky-sidebar.ts';
             import {testTheiaStickySidebars} from '/lib/test.ts';
 
+            let tss;
+
             document.addEventListener('DOMContentLoaded', function () {
-                new TheiaStickySidebar({
+                tss = new TheiaStickySidebar({
                     elements: 'section .columns',
                     additionalMarginTop: 30
                 });
             });
 
             document.querySelector('#start_test').addEventListener('click', element => {
                 element.disabled = true;
-                testTheiaStickySidebars();
+                testTheiaStickySidebars(tss);
             });
         </script>
         <style>

lib/test.ts

@@ -1,6 +1,8 @@
-import {getOffset} from "./theia-sticky-sidebar.ts";
+import {getOffset, TheiaStickySidebar} from "./theia-sticky-sidebar.ts";
+
+export function testTheiaStickySidebars(tss: TheiaStickySidebar) {
+    tss.options.requestAnimationFrame = false;
 
-export function testTheiaStickySidebars() {
     const me: {
         scrollTopStep: number,
         currentScrollTop: number,