jQuery手风琴在页面上滚动打开

时间:2018-10-10 13:42:31

标签: javascript jquery jquery-ui jquery-ui-accordion

我正在尝试在滚动时打开手风琴,但单击时却能正常工作,但在窗口滚动时却无法正常工作

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

0 个答案:

没有答案