diff --git a/README.md b/README.md
index bbc14fe..59539cd 100644
--- a/README.md
+++ b/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
 
diff --git a/examples/3-columns.html b/examples/3-columns.html
index 8366996..73a7cbc 100644
--- a/examples/3-columns.html
+++ b/examples/3-columns.html
@@ -6,8 +6,10 @@
         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
             });
@@ -15,7 +17,7 @@
 
         document.querySelector('#start_test').addEventListener('click', element => {
             element.disabled = true;
-            testTheiaStickySidebars();
+            testTheiaStickySidebars(tss);
         });
     </script>
     <style>
diff --git a/examples/4-columns.html b/examples/4-columns.html
index f8b2d1d..65e71c1 100644
--- a/examples/4-columns.html
+++ b/examples/4-columns.html
@@ -6,8 +6,10 @@
         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
             });
@@ -15,7 +17,7 @@
 
         document.querySelector('#start_test').addEventListener('click', element => {
             element.disabled = true;
-            testTheiaStickySidebars();
+            testTheiaStickySidebars(tss);
         });
     </script>
     <style>
diff --git a/examples/bootstrap-v4.html b/examples/bootstrap-v4.html
index 01f32a5..7efc3a6 100644
--- a/examples/bootstrap-v4.html
+++ b/examples/bootstrap-v4.html
@@ -10,8 +10,10 @@
             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
                 });
@@ -19,7 +21,7 @@
 
             document.querySelector('#start_test').addEventListener('click', element => {
                 element.disabled = true;
-                testTheiaStickySidebars();
+                testTheiaStickySidebars(tss);
             });
         </script>
         
diff --git a/examples/foundation.html b/examples/foundation.html
index d22cbed..f2458b7 100644
--- a/examples/foundation.html
+++ b/examples/foundation.html
@@ -7,8 +7,10 @@
             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
                 });
@@ -16,7 +18,7 @@
 
             document.querySelector('#start_test').addEventListener('click', element => {
                 element.disabled = true;
-                testTheiaStickySidebars();
+                testTheiaStickySidebars(tss);
             });
         </script>
         <style>
diff --git a/lib/test.ts b/lib/test.ts
index a5e364f..90d2cf0 100644
--- a/lib/test.ts
+++ b/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,
diff --git a/lib/theia-sticky-sidebar.ts b/lib/theia-sticky-sidebar.ts
index 0c6302c..755408d 100644
--- a/lib/theia-sticky-sidebar.ts
+++ b/lib/theia-sticky-sidebar.ts
@@ -19,6 +19,7 @@ interface Options {
     sidebarBehavior: string,
     defaultPosition: string,
     verbose: boolean,
+    requestAnimationFrame: boolean,
 }
 
 interface StickySidebar {
@@ -35,10 +36,11 @@ interface StickySidebar {
     paddingTop: number,
     paddingBottom: number,
     resizeObserver: ResizeObserver,
+    queuedForAnimationFrame: boolean,
 }
 
 export class TheiaStickySidebar {
-    private readonly options: Options;
+    public options: Options;
     private elements: Array<HTMLElement>;
     private initialized: boolean = false;
     private stickySidebars: Array<StickySidebar> = [];
@@ -55,6 +57,7 @@ export class TheiaStickySidebar {
             sidebarBehavior: 'modern',
             defaultPosition: 'relative',
             verbose: false,
+            requestAnimationFrame: true,
         };
         const finalOptions = {...defaults, ...options};
 
@@ -207,136 +210,18 @@ export class TheiaStickySidebar {
             this.resetSidebar(o);
 
             o.onScroll = () => {
-                // Stop if the sidebar isn't visible.
-                if (!this.isVisible(o.stickySidebar)) {
-                    return;
-                }
-
-                // Stop if the window is too small.
-                if (document.body.getBoundingClientRect().width < o.options.minWidth) {
-                    this.resetSidebar(o);
-                    return;
-                }
-
-                // Stop if the sidebar width is larger than the container width (e.g. the theme is responsive and the sidebar is now below the content)
-                if (o.options.disableOnResponsiveLayouts) {
-                    const sidebarWidth = getComputedStyle(o.sidebar).float === 'none' ? this.getOuterWidth(o.sidebar) : o.sidebar.offsetWidth;
-
-                    if (sidebarWidth + 50 > o.container.getBoundingClientRect().width) {
-                        this.resetSidebar(o);
-                        return;
-                    }
-                }
-
-                const scrollTop = window.scrollY;
-                let position = 'static';
-                const sidebarOffset = getOffset(o.sidebar);
-                let top = 0;
-
-                // If the user has scrolled down enough for the sidebar to be clipped at the top, then we can consider changing its position.
-                if (scrollTop >= sidebarOffset.top + (o.paddingTop - o.options.additionalMarginTop)) {
-                    // The top and bottom offsets, used in various calculations.
-                    const offsetTop = o.paddingTop + this.options.additionalMarginTop;
-                    const offsetBottom = o.paddingBottom + o.marginBottom + this.options.additionalMarginBottom;
-
-                    // All top and bottom positions are relative to the window, not to the parent elemnts.
-                    const containerTop = sidebarOffset.top;
-                    const containerBottom = getOffset(o.container).top + this.getClearedHeight(o.container);
-
-                    // The top and bottom offsets relative to the window screen top (zero) and bottom (window height).
-                    const windowOffsetTop = this.options.additionalMarginTop;
-                    let windowOffsetBottom;
-
-                    const sidebarSmallerThanWindow = (o.stickySidebar.offsetHeight + offsetTop + offsetBottom) < window.innerHeight;
-                    if (sidebarSmallerThanWindow) {
-                        windowOffsetBottom = windowOffsetTop + o.stickySidebar.offsetHeight;
-                    } else {
-                        windowOffsetBottom = window.innerHeight - o.marginBottom - o.paddingBottom - this.options.additionalMarginBottom;
-                    }
-
-                    const staticLimitTop = containerTop - scrollTop + o.paddingTop;
-                    const staticLimitBottom = containerBottom - scrollTop - o.paddingBottom - o.marginBottom;
-
-                    top = getOffset(o.stickySidebar).top - scrollTop;
-                    const scrollTopDiff = o.previousScrollTop - scrollTop;
-
-                    // If the sidebar position is fixed, then it won't move up or down by itself. So, we manually adjust the top coordinate.
-                    if (getComputedStyle(o.stickySidebar).position === 'fixed') {
-                        if (o.options.sidebarBehavior == 'modern') {
-                            top += scrollTopDiff;
-                        }
-                    }
-
-                    if (o.options.sidebarBehavior == 'stick-to-top') {
-                        top = this.options.additionalMarginTop;
-                    }
-
-                    if (o.options.sidebarBehavior == 'stick-to-bottom') {
-                        top = windowOffsetBottom - o.stickySidebar.offsetHeight;
-                    }
-
-                    if (scrollTopDiff > 0) { // If the user is scrolling up.
-                        top = Math.min(top, windowOffsetTop);
-                    } else { // If the user is scrolling down.
-                        top = Math.max(top, windowOffsetBottom - o.stickySidebar.offsetHeight);
-                    }
-
-                    top = Math.max(top, staticLimitTop);
-
-                    top = Math.min(top, staticLimitBottom - o.stickySidebar.offsetHeight);
-
-                    // If the sidebar is the same height as the container, we won't use fixed positioning.
-                    const sidebarSameHeightAsContainer = o.container.getBoundingClientRect().height == o.stickySidebar.offsetHeight;
-
-                    if (!sidebarSameHeightAsContainer && top == windowOffsetTop) {
-                        position = 'fixed';
-                    } else if (!sidebarSameHeightAsContainer && top == windowOffsetBottom - o.stickySidebar.offsetHeight) {
-                        position = 'fixed';
-                    } else if (scrollTop + top - sidebarOffset.top - o.paddingTop <= this.options.additionalMarginTop) {
-                        // Stuck to the top of the page. No special behavior.
-                        position = 'static';
-                    } else {
-                        // Stuck to the bottom of the page.
-                        position = 'absolute';
-                    }
-                }
-
-                /*
-                 * Performance notice: It's OK to set these CSS values at each resize/scroll, even if they don't change.
-                 * It's way slower to first check if the values have changed.
-                 */
-                if (position == 'fixed') {
-                    Object.assign(o.stickySidebar.style, {
-                        position: 'fixed',
-                        width: o.stickySidebar.getBoundingClientRect().width + 'px',
-                        transform: 'translateY(' + top + 'px)',
-                        left: (getOffset(o.sidebar).left + parseFloat(getComputedStyle(o.sidebar).paddingLeft) - window.scrollX) + 'px',
-                        top: '0px'
-                    });
-                } else if (position == 'absolute') {
-                    const css: Partial<CSSStyleDeclaration> = {};
-
-                    if (getComputedStyle(o.stickySidebar).position !== 'absolute') {
-                        css.position = 'absolute';
-                        css.transform = 'translateY(' + (scrollTop + top - sidebarOffset.top - o.stickySidebarPaddingTop - o.stickySidebarPaddingBottom) + 'px)';
-                        css.top = '0px';
-                    }
-
-                    css.width = o.stickySidebar.getBoundingClientRect().width + 'px';
-                    css.left = '';
-
-                    Object.assign(o.stickySidebar.style, css);
-                } else if (position == 'static') {
-                    this.resetSidebar(o);
-                }
-
-                if (position != 'static') {
-                    if (o.options.updateSidebarHeight) {
-                        o.sidebar.style.minHeight = (o.stickySidebar.offsetHeight + getOffset(o.stickySidebar).top - sidebarOffset.top + o.paddingBottom) + 'px';
+                if (o.options.requestAnimationFrame) {
+                    // Throttle/debounce our scroll handler.
+                    if (!o.queuedForAnimationFrame) {
+                        o.queuedForAnimationFrame = true;
+                        window.requestAnimationFrame(() => {
+                            this.handleScroll(o);
+                            o.queuedForAnimationFrame = false;
+                        });
                     }
+                } else {
+                    this.handleScroll(o);
                 }
-
-                o.previousScrollTop = scrollTop;
             };
 
             // Initialize the sidebar's position.
@@ -387,6 +272,139 @@ export class TheiaStickySidebar {
 
         return height;
     }
+
+    private handleScroll(o: StickySidebar) {
+        // Stop if the sidebar isn't visible.
+        if (!this.isVisible(o.stickySidebar)) {
+            return;
+        }
+
+        // Stop if the window is too small.
+        if (document.body.getBoundingClientRect().width < o.options.minWidth) {
+            this.resetSidebar(o);
+            return;
+        }
+
+        // Stop if the sidebar width is larger than the container width (e.g. the theme is responsive and the sidebar is now below the content)
+        if (o.options.disableOnResponsiveLayouts) {
+            const sidebarWidth = getComputedStyle(o.sidebar).float === 'none' ? this.getOuterWidth(o.sidebar) : o.sidebar.offsetWidth;
+
+            if (sidebarWidth + 50 > o.container.getBoundingClientRect().width) {
+                this.resetSidebar(o);
+                return;
+            }
+        }
+
+        const scrollTop = window.scrollY;
+        let position = 'static';
+        const sidebarOffset = getOffset(o.sidebar);
+        let top = 0;
+
+        // If the user has scrolled down enough for the sidebar to be clipped at the top, then we can consider changing its position.
+        if (scrollTop >= sidebarOffset.top + (o.paddingTop - o.options.additionalMarginTop)) {
+            // The top and bottom offsets, used in various calculations.
+            const offsetTop = o.paddingTop + this.options.additionalMarginTop;
+            const offsetBottom = o.paddingBottom + o.marginBottom + this.options.additionalMarginBottom;
+
+            // All top and bottom positions are relative to the window, not to the parent elemnts.
+            const containerTop = sidebarOffset.top;
+            const containerBottom = getOffset(o.container).top + this.getClearedHeight(o.container);
+
+            // The top and bottom offsets relative to the window screen top (zero) and bottom (window height).
+            const windowOffsetTop = this.options.additionalMarginTop;
+            let windowOffsetBottom;
+
+            const sidebarSmallerThanWindow = (o.stickySidebar.offsetHeight + offsetTop + offsetBottom) < window.innerHeight;
+            if (sidebarSmallerThanWindow) {
+                windowOffsetBottom = windowOffsetTop + o.stickySidebar.offsetHeight;
+            } else {
+                windowOffsetBottom = window.innerHeight - o.marginBottom - o.paddingBottom - this.options.additionalMarginBottom;
+            }
+
+            const staticLimitTop = containerTop - scrollTop + o.paddingTop;
+            const staticLimitBottom = containerBottom - scrollTop - o.paddingBottom - o.marginBottom;
+
+            top = getOffset(o.stickySidebar).top - scrollTop;
+            const scrollTopDiff = o.previousScrollTop - scrollTop;
+
+            // If the sidebar position is fixed, then it won't move up or down by itself. So, we manually adjust the top coordinate.
+            if (getComputedStyle(o.stickySidebar).position === 'fixed') {
+                if (o.options.sidebarBehavior == 'modern') {
+                    top += scrollTopDiff;
+                }
+            }
+
+            if (o.options.sidebarBehavior == 'stick-to-top') {
+                top = this.options.additionalMarginTop;
+            }
+
+            if (o.options.sidebarBehavior == 'stick-to-bottom') {
+                top = windowOffsetBottom - o.stickySidebar.offsetHeight;
+            }
+
+            if (scrollTopDiff > 0) { // If the user is scrolling up.
+                top = Math.min(top, windowOffsetTop);
+            } else { // If the user is scrolling down.
+                top = Math.max(top, windowOffsetBottom - o.stickySidebar.offsetHeight);
+            }
+
+            top = Math.max(top, staticLimitTop);
+
+            top = Math.min(top, staticLimitBottom - o.stickySidebar.offsetHeight);
+
+            // If the sidebar is the same height as the container, we won't use fixed positioning.
+            const sidebarSameHeightAsContainer = o.container.getBoundingClientRect().height == o.stickySidebar.offsetHeight;
+
+            if (!sidebarSameHeightAsContainer && top == windowOffsetTop) {
+                position = 'fixed';
+            } else if (!sidebarSameHeightAsContainer && top == windowOffsetBottom - o.stickySidebar.offsetHeight) {
+                position = 'fixed';
+            } else if (scrollTop + top - sidebarOffset.top - o.paddingTop <= this.options.additionalMarginTop) {
+                // Stuck to the top of the page. No special behavior.
+                position = 'static';
+            } else {
+                // Stuck to the bottom of the page.
+                position = 'absolute';
+            }
+        }
+
+        /*
+         * Performance notice: It's OK to set these CSS values at each resize/scroll, even if they don't change.
+         * It's way slower to first check if the values have changed.
+         */
+        if (position == 'fixed') {
+            Object.assign(o.stickySidebar.style, {
+                position: 'fixed',
+                width: o.stickySidebar.getBoundingClientRect().width + 'px',
+                transform: 'translateY(' + top + 'px)',
+                left: (getOffset(o.sidebar).left + parseFloat(getComputedStyle(o.sidebar).paddingLeft) - window.scrollX) + 'px',
+                top: '0px'
+            });
+        } else if (position == 'absolute') {
+            const css: Partial<CSSStyleDeclaration> = {};
+
+            if (getComputedStyle(o.stickySidebar).position !== 'absolute') {
+                css.position = 'absolute';
+                css.transform = 'translateY(' + (scrollTop + top - sidebarOffset.top - o.stickySidebarPaddingTop - o.stickySidebarPaddingBottom) + 'px)';
+                css.top = '0px';
+            }
+
+            css.width = o.stickySidebar.getBoundingClientRect().width + 'px';
+            css.left = '';
+
+            Object.assign(o.stickySidebar.style, css);
+        } else if (position == 'static') {
+            this.resetSidebar(o);
+        }
+
+        if (position != 'static') {
+            if (o.options.updateSidebarHeight) {
+                o.sidebar.style.minHeight = (o.stickySidebar.offsetHeight + getOffset(o.stickySidebar).top - sidebarOffset.top + o.paddingBottom) + 'px';
+            }
+        }
+
+        o.previousScrollTop = scrollTop;
+    }
 }
 
 export function getOffset(element: HTMLElement): { top: number, left: number } {