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

Question

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.

Vedran Maric · Accepted Answer · 2018-12-23 22:23:40Z

0

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;
});

edited Dec 23, 2018 at 22:23

answered Dec 23, 2018 at 17:32

Vedran Maric

89410 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user979331 Over a year ago

That did not work, this is a wordpress site using wpbakery to build the page.

user979331 Over a year ago

Here is the site in question with the issue. This has your code applied. new.sekanskin.com/what-we-do

Vedran Maric Over a year ago

I've updated my answer, let me know if it was helpful.

user979331 Over a year ago

I updated my parallax.min.js file, but that did not work.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related