I have this codepen which works fine, but when I load it on my WordPress site it doesn’t seem to run correctly.

Here is the JS Code:

jQuery(document).ready(function() {
(function(jQuery, win) {
    jQuery.fn.inViewport = function(cb) {
        return this.each(function(i, el) {
            function visPx() {
                var H = jQuery(this).height(),
                    r = el.getBoundingClientRect(),
                    t = r.top,
                    b = r.bottom;
                return cb.call(el, Math.max(0, t > 0 ? H - t : b < H ? b : H));
            }
            visPx();
            jQuery(win).on("resize scroll", visPx);
        });
    };
})(jQuery, window);

jQuery(".kk-img").inViewport(function(px) {
    if (px) jQuery(this).addClass("vsb");
    jQuery(this).toggleClass("vsb", !!px);
});

jQuery(".kk-rec").inViewport(function(px) {
    if (px) jQuery(this).addClass("vsb");
    jQuery(this).toggleClass("vsb", !!px);
});
});

Also, the Console of dev tools shows no errors. Anyone has an idea of where should I be looking for to solve this issue?

Thank you for your time.

— Some more clarification —

The JS code is adding a class on some elements when these are visible on viewport. Then these elements have some transitions so that they will appear smoothly (you can check what code does on codepen link).

On my website, it is “not working” because the addClass is not added on the elements at all. And I don’t know why..

Read more here: Script is working correctly on Codepen but not on WP site


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: