我正在尝试在滚动时打开手风琴,但单击时却能正常工作,但在窗口滚动时却无法正常工作
<div class="accordion main-wraper scrollme d-ib">
<section class="accordion-item accordion-item--default" >
<h2 class="accordion-item-title">Title 1</h2>
<div class="accordion-item-content accordian-content">
<!-- Data -->
</div>
<h2 class="accordion-item-title">Title 2</h2>
<div class="accordion-item-content accordian-content">
<!-- Data -->
</div>
<h2 class="accordion-item-title">Title 3</h2>
<div class="accordion-item-content accordian-content">
<!-- Data -->
</div>
</section>
</div>
js如下,
// Accordian.
$(function() {
$( ".accordion-item" ).accordion({
heightStyle: "content",
collapsible: true,
active: true,
animate:400,
activate: function( event, ui ) {
if(!$.isEmptyObject(ui.newHeader.offset())) {
$('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top-150 }, 'slow');
}
}
});
});
并使用javascript打开它,我已经检查了窗口大小并与当前的手风琴div匹配,但是在一个手风琴上无法正常工作而不是在另一个上不正确。我想在向下滚动时一一打开手风琴,在向上滚动时关闭。
function isScrolledIntoView(element) {
var scrollBottomPosition = $(window).scrollTop() + $(window).height();
console.log($(element).offset().top, scrollBottomPosition);
return ($(element).offset().top < scrollBottomPosition);
}
function addClassIfVisible(element) {
$(element).each(function () {
if (isScrolledIntoView(this)) {
$( ".accordion-item" ).accordion({
active: 0,
animate: 2000
});
// $(this).find('.accordion-item-content').removeClass('add');
// $(this).prev().find('.accordion-item-content').addClass('add');
}
});
}
addClassIfVisible('.accordion-item');
$(window).scroll(function () {
addClassIfVisible('.accordion-item');
});