How to Unset CSS Overflow Using JavaScript when Sticky Elements Stop Working

If your sticky sidebar, header, or footer CTAs stopped working, there's a good chance that your theme added the CSS overflow property to a parent element (usually a div).

Does this sound familiar? Then, keep reading ;-)

In this tutorial, we'll use JavaScript to unset that bad boy.

The steps below use WordPress as an example. But, the same concept applies to other website platforms or frameworks.

Step 1: Find the Offending Element

Open your dev tools and type in overflow in the search filter for the CSS panel.

Make a note of the HTML ID attribute of the element that has the overflow property set.

In this case, it's boxed-wrapper.

Step 2: Write the JavaScript to Unset the Overflow Property

Open your favourite code editor. Copy and paste the code below into your editor and save it using the .js file extension.

(function () {
    if (!document.URL.includes("floating-toc-sidebar-test")) return;
    let element = document.getElementById("boxed-wrapper");
    if (!element) return;
    element.style.overflow = 'unset'; /* To fix any position: sticky further down the DOM. */
})();        

Change floating-toc-sidebar-test to your page slug. This is because we want this code to run only on the page that needs fixing.

Change boxed-wrapper to the HTML ID you noted in Step 1. Note: If the offending HTML element didn't have an ID, you'll need to come up with a CSS selector that grabs that one element only.

Save your file again.

Step 3: Install the JavaScript Code

There are 2 options.

Option 1: Installing Without a Plugin

Open your favourite code editor again. Copy and paste the code below and save it using the .php file extension.

/* Inline script printed out in the footer to fix sticky elements. */
function sticky_fix_add_script_wp_footer() {
    ?>
        <script>
            (function () {
                if (!document.URL.includes("floating-toc-sidebar-test")) return;
                let element = document.getElementById("boxed-wrapper");
                if (!element) return;
                element.style.overflow = 'unset'; /* To fix any position: sticky further down the DOM. */
            })();        
        </script>
    <?php
}
add_action('wp_footer', 'sticky_fix_add_script_wp_footer');

Replace the function between the <script></script> tags with the function you wrote in Step 2.

Save your PHP file.

Copy and paste the contents of your PHP file into your child theme's functions.php file.

Option 2: Installing Using the Insert Headers and Footer Plugin

Log into your WordPress admin area. Head over to Settings > Insert Headers and Footers.

In the Scripts in Footer code snippet box at the bottom, type in the following code.

<script>
</script>

Then, copy/paste the JavaScript code that you wrote in Step 2 between the <script></script> tags.

Here's what you should have so far.

Hit Save.

And, you're done and done!

Give your page a test.

Remember to share your knowledge with others who run into the same problem.

Enjoy!