How to Make a Fixed Sidebar with Visual Composer on Your WordPress Site

I'm struggling to create a sticky sidebar on my WordPress site because Visual Composer doesn't allow me to add more IDs and Classes to the divs. I've tried using the Sticky Sidebar plugin from GitHub, which can be found here:

The script has been embedded in the header like this:

<script type="text/javascript" src="https://classymagazin.de/sticky-sidebar.js"></script>

Here's the code I have so far:

<script type="text/javascript">
    var sidebar = new StickySidebar('#sidebarContainer', {
        containerSelector: '#sidebarContainer',
        innerWrapperSelector: '#stickySocialIcons',
        topSpacing: 20,
        bottomSpacing: 20
    });
</script>

However, I keep encountering this error:

Uncaught ReferenceError: StickySidebar is not definedat (index):186

Does anyone know how to resolve this issue and make my sidebar sticky? You can find my sidebar with the ID #sidebarContainer on this website:

Thank you!

javascriptjqueryhtmlcsswordpress

Answer №1

To implement this functionality, you can include the following code within document ready:

    jQuery(document).ready(function(){var sidebar = new StickySidebar('#sidebarContainer', {containerSelector: '#sidebarContainer',
    innerWrapperSelector: '#stickySocialIcons',
    topSpacing: 20,
    bottomSpacing: 20});});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

-=:Heading with a decorative vertical line=:-

Currently, I am working on a CSS project that requires page titles (headings) to be centered with horizontal lines positioned vertically on both sides. Additionally, there is a background image on the page which means the title's background must be tr ...

htmlcsspseudo-class

Setting limits on values in jQuery

Hello everyone, I'm trying to establish a limit for each progress bar within Bootstrap 4 that triggers upon clicking. The issue lies in the fact that every time I click, the value always jumps to 100. Is there a way to set a maximum value for each p ...

javascriptjquerytwitter-bootstrap-4

Could there be a tag present in the DOM that is not visible on the page?

During my browsing session, I encountered a scenario in which I located an "anchor" tag within the DOM using xpath. However, the corresponding element was mysteriously missing from the page. To add to the confusion, when I tested the tag, the click() ope ...

javascripthtmlseleniumdomxpath

jquery selector targeting a select optiongroup that contains a specific label value

In my code, I have a select multiple with option groups: <select _ngcontent-oeq-14="" class="form-control" id="category-select" multiple=""> <optgroup label="grocery products"> <option>meat</option> <option>dai ...

jqueryhtmlselectjquery-selectorsselector

javascript Unable to execute function in Internet Explorer 11

I'm experiencing an issue where this script works in Google Chrome but not in IE 11. Can anyone explain why?: <script type="text/javascript"> window.onload = function () { var ammount = document.getElementById('ammount'); var price = ...

javascriptphpinternet-explorer

Prevent repetitive content by utilizing multiple query loops in WordPress

I'm looking to set up three query loops within a single template. The first two loops will pull posts from the featured category, while the third loop will retrieve all posts. My challenge lies in ensuring that the third loop excludes any posts alread ...

phpwordpressblogscustom-wordpress-pages

Customize the height of the Angular Material autocomplete dropdown to meet your needs

Context I have been working on a customized autocomplete feature using Angular Material, and I need to adjust the height of the dropdown results box for better visibility. Exploration After conducting some research, I discovered that Angular Material cu ...

javascriptcssangularjsautocompleteangular-material

Here is a unique rewrite:"Adjusting the prop of a Material UI Button component depending on screen size breakpoints can be achieved by utilizing

While using the Material UI Button component, I encountered an issue with conditionally determining the variant of the button based on screen size. Specifically, I want the variant to be 'outlined' on medium and larger screens, and no variant at ...

javascriptcssreactjsmaterial-uimedia-queries

Guide to logging in using REST/API with a Next.js application

Issue: I am facing a challenge integrating with an existing repository that was created using Next.js. The task at hand is to enable users to sign in to the application through a specific endpoint or URL. To achieve this, I have been attempting to utilize ...

javascriptauthenticationnext.jsserver-side-rendering

Find all the different ways that substrings can be combined in an array

If I have a string input such as "auto encoder" and an array of strings const arr = ['autoencoder', 'auto-encoder', 'autoencoder'] I am looking to find a way for the input string to match with all three values in the array. ...

javascriptreactjsregex

Applying background-image in ngStyle results in an undefined value

I have been attempting to incorporate images (retrieved through an API) as the background-image of an element. However, I keep encountering the error message Cannot read property 'url' of undefined, even though the URL is actually being rendered. ...

javascriptangulartypescriptangular5

Use regular expressions to split a number string based on the individual digit values

Is it possible to use regex to split a string that consists only of numbers based on matching digit values? Take for instance this input: "11222344" The expected output should be: ["11","222","3","44"] ...

javascriptnode.jsregexfrontend

How can we include a string in the request body in Node.js using Express?

My reverse proxy is functioning properly: app.post('/geoserver', function (req, res) { apiProxy.web(req, res, {target: serverOne}); }); The request already contains a body like this: https://i.sstatic.net/riRBe.png I want to append a stri ...

javascriptnode.jsexpressproxy

Assign a class to an element depending on the date

I need to customize a span element in my HTML code like this. html <span class="tribe-event-date-start">September 5 @ 7:00 pm</span> My objective is to identify that specific element based on its date and then apply a class to its parent co ...

javascriptjquerywordpressevents

Utilize jQuery to hide and then show elements based on text input

Recently, I came across a useful jQuery filter example that sparked my interest. To test it out, I created my live example and shared the code on CodePen (or you can check out the Fiddle if you prefer). One issue I encountered was that after entering text ...

javascriptjqueryhtmlcss

Is there a way to verify an email address and transfer form data to a different HTML page for printing?

How do I troubleshoot email validity checking issues in my form? It works fine when no characters are entered, but fails when characters are inputted. What could be causing this problem? Additionally, I want to open a new HTML sub-file after form submissi ...

javascripthtmlreactjsforms

Utilizing data attributes and JavaScript to dynamically assign a class to carousel navigation items

Hello there! I recently created a carousel and carousel navigation system using Bootstrap. I am now trying to figure out how to detect the value of 'data-slide-to' and then apply a specific style to the corresponding navigation item based on that ...

javascriptjquerycsstwitter-bootstrap

Is it possible to turn a <span> element into a clickable hyperlink?

Can a span be turned into a clickable link? I have successfully made a span with only a background image (using the Gilder/Levin image replacement technique) into a clickable link. This seems to work well on my desktop in Chrome, Opera, and IE 11. Is thi ...

htmlcss

What's the best way to add a jQuery event handler to several cached selectors at once?

Imagine having three buttons <button data-action="grow" class="resizeButton">Grow</button> <button data-action="shrink" class="resizeButton">Shrink</button> <button id="normalButton">Normal Button</button> All buttons ...

javascriptarraysjquery-selectorsjquery

Steps for changing an array of objects from a string into a regular array of objects

I am facing an issue where I have an array of objects in string format that I need to convert into a normal array of objects. I tried using the JSON.parse() method for conversion, but when attempting to access values like: this.contact_data[0].data.value, ...

javascriptvue.js