2016-06-10 51 views
1

我有一个布局方案,其中固定向下箭头旨在平滑滚动用户到下一个完整高度部分。向下遍历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时,这会崩溃;或者当从下一部分的容器中取出时。

我已经用jQuery的.index()函数进行了实验,但最终导致失败的非常复杂的解决方案。还查看嵌套的条件语句,但又以非常臃肿的失败代码结束。

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

感谢 克里斯

回答

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

+0

https://jsfiddle.net/arunpjohny/4o3rj462/1/ –

+0

谢谢阿伦,作品一种享受。我怀疑在.index中的解决方案。 :) –