[Support request] sticky sidebar using vanilla JS

[Deepak]

Hello Team,

Currently I am using CSS to make my left sidebar sticky which seems to work fine but lately I found some weird issue where it doesn’t work on Canary browser (the issue is not related to the theme).

But this makes me wonder if I should switch to javascript to achieve this. I know there are multiple jquery plugin to achieve this but I would like to avoid those.

I could find some online help
https://www.cssscript.com/small-sticky-sidebar-vanilla-javascript-floatsidebar-js/
https://github.com/moubi/sticky-nav
https://abouolia.github.io/sticky-sidebar/

But I am unable to get those working as they require a certain HTML structure. For example:

<div id="main-content" class="main">
    <div id="sidebar" class="sidebar">
        <div class="sidebar__inner">
            <!-- Content goes here -->
        </div>
    </div>
    <div id="content" class="content">
        <!-- Content goes here -->
    </div>
</div>

where the following code would work

<script type="text/javascript" src="./js/sticky-sidebar.js"></script>

<script type="text/javascript">
    var sidebar = new StickySidebar('#sidebar', {
        containerSelector: '#main-content',
        innerWrapperSelector: '.sidebar__inner',
        topSpacing: 20,
        bottomSpacing: 20
    });
</script>

which I replaced with following using wp_head hook:

<script type="text/javascript">
    var sidebar = new StickySidebar('#left-sidebar', {
        containerSelector: '.site-content',
        innerWrapperSelector: '.inside-left-sidebar',
        topSpacing: 20,
        bottomSpacing: 20
    });
</script>

and loading the JS via functions.php

function your_theme_js() {
    wp_enqueue_script( 'theme_js', get_stylesheet_directory_uri() . '/sticky-sidebar.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'your_theme_js' );

But this is not working. Am I missing anything?

Can you please help here.

[Elvin]

Hi there,

You can inspect your site and check the console tab for errors to have an idea of why it isn’t working.

I’ve checked the page you’ve linked and it had plenty of errors.

The most important one related to the script is this one:

Uncaught ReferenceError: StickySidebar is not defined at (index):97

As this is a third party js library, this is out of our scope of support.

But to help you out, perhaps this could help. (taken directly from its github page)

https://github.com/abouolia/sticky-sidebar/issues/98

[Deepak]

Thanks Elvin.

I understand this is a third party JS. I could fix that error with the link you gave but now I am getting another error.

The idea of opening this thread was if anything similar JS function which you can give to make a sidebar sticky?

[David]

Hi there,

i can’t see any reason why position sticky doesn’t work on the Canary browser.
Does your CSS include the -webkit prefix? As thats the only thing that comes to mind with why the CSS doesn’t work ie.

position: -webkit-sticky;
position: sticky;

But trying to support an untested browser that is updated almost daily is a complete waste of time. Who says the JS fix you find will work tomorrow or the day after. Unfortunately its not something can provide a custom fix for.

[Author]

Posts