Question

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

每个部分都有一个类（.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时，这会分崩离析;或者从下一部分的容器中取出时。

我已经尝试过针对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树;兄弟姐妹或孩子

1 个答案: