我有一个布局方案,其中固定向下箭头用于平滑滚动用户到下一个全高度部分。
每个部分都有一个类(.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()函数,但最终得到了非常复杂的失败解决方案。另外看了一下嵌套的条件语句,但最后又发现了非常臃肿的失败代码。
希望有人能指出我正确的逻辑和解决方案。
由于 克里斯
答案 0 :(得分: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 />