多个粘性页脚

Question

是否有多个粘性页脚的解决方案，每个部分/ div一个？

假设以下示例：

<nav id="stickyHeaderMenu"> 
   <!-- link_to section#one -->
   <!-- link_to section#two -->
   <!-- link_to section#three -->
</nav>

<section id="one"> 
   <div class="content"> </div>
   <nav id="footerNavOne"> </nav>
</section>

<section id="two"> 
   <div class="content"> </div>
   <nav id="footerNavTwo"> </nav>
</section>

<section id="three"> 
   <div class="content"> </div>
   <nav id="footerNavThree"> </nav>
</section>

这个想法是在页面底部有一个粘性标题菜单和一个粘性菜单。用户向下滚动会导致页脚发生变化，具体取决于视图中的部分。

请注意，部分非常高，并且需要滚动才能看到所有部分。

因此，在查看section#one时，nav#footerNavOne是粘性页脚。一旦用户到达section#one的末尾，nav#footerNavOne就会粘在它上面并随着它离开页面。现在section#two出现，nav#footerNavTwo成为新的粘性页脚。

---

更新：我发现以下内容非常有效：sticky-kit.js。

它将div粘贴到其父级的顶部。请参阅this jsfiddle，在上面的示例中显示完成。

是否可以做相反的事情:(将div粘贴到父母的底部）？