Hello !

I know that the problem of images not loading can be corrected by disable Ajax in the options, and it's what I done.

But I really want to use the Ajax loading, and I need your help to correct that image loading problem. Is it possible ?

Thank you !

I also have another problem.

I added some jQuery lines in wordpress, but they don't work. Like you can see on the screenshots, my jQuery is present on the page, and there is no error in the console.

Here I tried a script that put a background on the menu after the scroll, but this don't work, nothing happen, the class "solid" is not added.

Can you help me with that please ?

Thank you !

I now use the wpbakery child theme and there is now no problems with image loads using AJAX.

I disabled smooth scrolling and now the scroll event work.

But how can I do if I really want the smooth scroll effect and my custom JS scroll events ? There is a solution ?

Thanks for your answer.

I tried to do it myself, but I don't understand how it work, my skills in JS and jQuery are limited.

Can I charge you to do it and to explain me in details how you do please ? I want to know how to do if I have other listeners to add on scroll.

Thank you for your help but I don't understand how to do.

I wrote :

function listener(status) {  // ...
}
scrollbar.addListener(listener);

just after :

var elem = document.querySelector("#content-scroll");
var scrollbar = Scrollbar.init(elem,
{
renderByPixels: true,
damping:0.05
});

But what do I write after :

function listener(status) {...

Where do I write :

type ScrollStatus = {
  // equal to `scrollbar.offset`
  offset: {
    x: number,
    y: number,
  },
  // equal to `scrollbar.limit`
  limit: {
    x: number,
    y: number,
  },
};

And where do I write my function used to change the background of the menu :

jQuery(document).ready(function() {
        jQuery(window).scroll(function() {
          if(jQuery(this).scrollTop() > jQuery(window).height()-60) { 
              jQuery('header').addClass('solid');
          } else {
              jQuery('header').removeClass('solid');
          }
        });
});

Like I said, my skills in jQuery and js are limited, if I know precisely how to do I can understand, but actually I don't understand.

Can you help me please ? Thank you.

In other words, I think I actually don't have the skills to make this, I don't understand what to do, but I want to understand.

So maybe if you can help me a bit more, I would appreciate it.

Thank you for your help.

Thanks, but I found another solution using ScrollMagic.

I wrote this in script.js to add a css class to the header :

var headerScene = new ScrollMagic.Scene({
            triggerElement: '#main-content',
            triggerHook: 0,
        })
        .setClassToggle("header", "solid") // add class to reveal
        .addTo(controller);

And added "headerScene.refresh()" in this condition to make the smooth scroll work with this class change :

if ($("body").hasClass("smooth-scroll")) {
            scrollbar.addListener(() => {
                heroScene.refresh()
                captionScene.refresh()
                headerScene.refresh()
            });
        }

Thank you for your help.