DEV Community

loading...
Cover image for How to Unset CSS Overflow Using JavaScript when Sticky Elements Stop Working

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

marklchaves profile image mark l chaves ・2 min read

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.

Finding the overflow property using the browser inspector tool

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. */
})();        
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Adding JavaScript to the footer using a plugin

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!

Discussion (0)

Forem Open with the Forem app