jQuery 单击事件更改其他元素的高度后视差不滚动
jQuery Parallax not scrolling after click event changes height of other element
我在我的 wordpress 站点中使用 Parallax.js。在我的一个页面上,我有一个点击事件,当它被执行时,它会向一个元素(不是视差元素)添加一个 class ,从而将高度添加到非视差元素。无论如何,当它执行时我的视差停止滚动。
我已经尝试重新触发我的点击事件的视差,但没有奏效。
这是我的 jquery 代码:
$('.architectural-films').bind('click', function(e){
$(".section1").addClass("toggle");
return false;
});
这是我的 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;
}
和我的html的视差:
<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("http://new.sekanskin.com/wp-content/uploads/2018/12/windows-walls-floors.jpg"); top: -36.3243%;"></div></div>
这是我试图重新触发视差的方法:
$('.architectural-films').bind('click', function(e){
$(".section1").addClass("toggle");
$(window).trigger('resize.px.parallax');
return false;
});
我期望视差能够在我的点击事件执行后继续滚动。
您正在使用旧的且未维护的视差库。
如果您不能使用其他库,您需要更改此文件中的代码https://raw.githubusercontent.com/IanLunn/jQuery-Parallax/master/scripts/jquery.parallax-1.1.3.js
。
您必须将此自定义事件侦听器添加到视差构造函数 ($.fn.parallax
):
// [...]
$window.bind('parallax-refresh', function (){
$this.each(function() {
firstTop = $this.offset().top;
});
});
// [...]
然后在主脚本中触发事件:
$('.architectural-films').bind('click', function(e){
$(".section1").addClass("toggle").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
$(window).trigger('parallax-refresh');
});
return false;
});
我在我的 wordpress 站点中使用 Parallax.js。在我的一个页面上,我有一个点击事件,当它被执行时,它会向一个元素(不是视差元素)添加一个 class ,从而将高度添加到非视差元素。无论如何,当它执行时我的视差停止滚动。
我已经尝试重新触发我的点击事件的视差,但没有奏效。
这是我的 jquery 代码:
$('.architectural-films').bind('click', function(e){
$(".section1").addClass("toggle");
return false;
});
这是我的 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;
}
和我的html的视差:
<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("http://new.sekanskin.com/wp-content/uploads/2018/12/windows-walls-floors.jpg"); top: -36.3243%;"></div></div>
这是我试图重新触发视差的方法:
$('.architectural-films').bind('click', function(e){
$(".section1").addClass("toggle");
$(window).trigger('resize.px.parallax');
return false;
});
我期望视差能够在我的点击事件执行后继续滚动。
您正在使用旧的且未维护的视差库。
如果您不能使用其他库,您需要更改此文件中的代码https://raw.githubusercontent.com/IanLunn/jQuery-Parallax/master/scripts/jquery.parallax-1.1.3.js
。
您必须将此自定义事件侦听器添加到视差构造函数 ($.fn.parallax
):
// [...]
$window.bind('parallax-refresh', function (){
$this.each(function() {
firstTop = $this.offset().top;
});
});
// [...]
然后在主脚本中触发事件:
$('.architectural-films').bind('click', function(e){
$(".section1").addClass("toggle").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
$(window).trigger('parallax-refresh');
});
return false;
});