向下 DOM 树遍历下一个 class；兄弟姐妹或 children

Question

我有一个布局方案，其中固定的向下箭头旨在让用户平滑滚动到下一个全高部分。

每个部分都有一个 class (.section) 当每个部分都是兄弟时，这很有效并且相当简单。有一个代码块要求这些部分位于另一个 div.

中

我创建了一个代码笔来说明这一点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>

到目前为止，我的逻辑是。 - 添加一个 class (.section-past) 到每个部分，一旦它们通过视口的顶部。 - 单击向下 link 时，找到最后一个 (.section-past)，然后滚动到下一个 .section.

当下一节需要进入容器 div 时，这会崩溃；或者在下一部分离开容器时。

我已经尝试过 jquery 的 .index() 函数，但最终得到了非常复杂的失败解决方案。还查看了嵌套条件语句，但再次以非常臃肿的失败代码告终。

希望有人能指出我正确的逻辑和解决方案。

谢谢克里斯

Answer 1

你可以尝试通过索引找到下一个元素，比如

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 />

向下 DOM 树遍历下一个 class；兄弟姐妹或 children

Traversing down DOM tree for next class; sibling or children

jquery

dom

jquery-traversing