JQuery аккордеон Открыть при прокрутке к нему на странице - PullRequest
Новая
       34

JQuery аккордеон Открыть при прокрутке к нему на странице

0 голосов
/ 10 октября 2018

Я пытаюсь открыть гармошку при прокрутке, она работает нормально при нажатии, но не при прокрутке окна 

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