[Support request] sticky sidebar using vanilla JS

Home Forums Support [Support request] sticky sidebar using vanilla JS

Home Forums Support sticky sidebar using vanilla JS

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1642378
    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.

    #1642447
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

    #1642458
    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?

    #1642836
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.