jQuery Parallax not scrolling after click event changes height of other element

I am using Parallax.js in my wordpress site. On one of my pages, I have a click event and when its executed it adds a class to an element (not the parallax element) which adds height to the non-parallax element. anyways when its executed my parallax stops scrolling.

I have tried re-triggering the parallax on my click events and that did not work.

Here is my jquery code:

$('.architectural-films').bind('click', function(e){
    $(".section1").addClass("toggle");
    return false;
});

And here is my css

.section1 {
    max-height: 0px;
    transition: max-height 1.00s ease-out;
    overflow: hidden;
}
.toggle{
    max-height: 5000px;
    transition: max-height 1.30s ease-in;
}

and my html of the parallax:

<div data-vc-full-width="true" data-vc-full-width-init="true" data-vc-stretch-content="true" data-vc-parallax="1.5" data-vc-parallax-o-fade="on" data-vc-parallax-image="http://new.sekanskin.com/wp-content/uploads/2018/12/windows-walls-floors.jpg" class="vc_row wpb_row vc_row-fluid what-we-do-service vc_row-has-fill vc_row-no-padding vc_general vc_parallax vc_parallax-content-moving-fade js-vc_parallax-o-fade" style="position: relative; left: -155px; box-sizing: border-box; width: 1440px;"><div class="wpb_column vc_column_container vc_col-sm-12 skrollable skrollable-before" data-5p-top-bottom="opacity:0;" data-30p-top-bottom="opacity:1;" style="opacity: 1;"><div class="vc_column-inner"><div class="wpb_wrapper"></div></div></div><div class="vc_parallax-inner skrollable skrollable-between" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; background-image: url(&quot;http://new.sekanskin.com/wp-content/uploads/2018/12/windows-walls-floors.jpg&quot;); top: -36.3243%;"></div></div>

And here is what I tried to re-trigger the parallax:

$('.architectural-films').bind('click', function(e){
    $(".section1").addClass("toggle");
        $(window).trigger('resize.px.parallax');
    return false;
});

What I am expecting the parallax to be able to continue be able to scroll after my click event is executed.

Solution

You are using old and unmaintained parallax library.

If you cannot use some other library, you need to change the code in this file https://raw.githubusercontent.com/IanLunn/jQuery-Parallax/master/scripts/jquery.parallax-1.1.3.js. You would have to add this custom event listener to the parallax constructor ($.fn.parallax):

// [...]
$window.bind('parallax-refresh', function (){
    $this.each(function() {
        firstTop = $this.offset().top;
    });
});
// [...]

And then trigger the event back in main script:

$('.architectural-films').bind('click', function(e){
    $(".section1").addClass("toggle").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
        $(window).trigger('parallax-refresh');
    });
    return false;
});