Переход вниз по дереву DOM для следующего класса; сестра или дети

У меня есть сценарий макета, в котором фиксированная стрелка вниз предназначена для плавной прокрутки пользователя к следующему разделу полной высоты.

Каждый раздел имеет класс (.section). Это работает и довольно просто, когда все разделы являются одноуровневыми. Есть один блок кода, который требует, чтобы эти разделы находились в другом div.

Я создал codepen, чтобы проиллюстрировать это http://codepen.io/chrisando/pen/GqoORa/

<a class="down">DOWN</a>

<div class="section">
  Section 1
</div>

<div class="section">
  Section 2
</div>

<div class="container">

  <div class="section">
    Section 3
  </div>

  <div class="section">
    Section 4
  </div>

</div>

<div class="section">
  Section 5
</div>

Моя логика до сих пор была. - Добавьте класс (.section-past) к каждому разделу после того, как они пересекут верхнюю часть области просмотра. - При нажатии на ссылку вниз найдите последний (.section-past), затем прокрутите до следующего .section.

Это разваливается, когда нужно перейти в контейнер div для следующего раздела; или при выходе из контейнера для следующей секции.

Я экспериментировал с функцией .index() для jquery, но в итоге получил очень сложные решения, которые не увенчались успехом. Также посмотрел на вложенные условные операторы, но снова получил очень раздутый ошибочный код.

Надеясь, что кто-то может указать мне на правильную логику и решение.

Спасибо Крис


jquery dom jquery-traversing
person Chris Anderson    schedule 10.06.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете попытаться найти следующий элемент по индексу, например

function sectionPosition() {
  jQuery('.section').each(function() {
    var section = $(this);
    var position = section.position().top - jQuery(window).scrollTop();

    if (position <= 50) {
      section.addClass('section-past');
    } else {
      section.removeClass('section-past');
    }
  });
}

// Run on load
sectionPosition();

// run on scroll
jQuery(window).bind('scroll', function() {
  sectionPosition();
});

var $sections = $('.section');
jQuery(".down").click(function() {
  var next;
  next = $sections.eq($sections.index($('.section-past').last()) + 1);

  if (next.length) {
    jQuery('html,body').animate({
      scrollTop: next.offset().top - 50
    }, 1000);
  }
});
.section {
  background: lightblue;
  margin: 10px;
  height: 100px;
}
.container .section {
  background: lightpink;
}
.down {
  background: red;
  width: 60px;
  height: 50px;
  line-height: 50px;
  display: block;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -30px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<a class="down">DOWN</a>

<div class="section">
  Section 1
</div>

<div class="section">
  Section 2
</div>

<div class="container">

  <div class="section">
    Section 3
  </div>

  <div class="section">
    Section 4
  </div>

</div>

<div class="section">
  Section 5
</div>


<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

person Arun P Johny    schedule 10.06.2016
comment
Спасибо Арун, работает удовольствие. Я подозревал решение внутри .index. :) - person Chris Anderson; 11.06.2016