向下遍歷DOM樹;兄弟或兒童

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