如何防止固定元素在另一个元素上滚动或下移？

Question

尽管我在Google和这个网站上进行了搜索，但我还是无法找到解决我特定问题的确切方法。

我有一个带有固定标题和固定导航div的页面，它位于右侧的主要内容中。当页面滚动到底部时，页脚会在nav div的顶部向右滚动。你可以在这里看到我的意思：

http://codepen.io/anon/pen/gAjcr
（链接列表延长了戏剧效果以清楚地说明我的问题）

有没有办法使用CSS，或添加一些额外的元素，我可以防止这种情况发生？我已经尝试调整边距和填充，什么不是，无济于事。我能想到的唯一方法可能是使用一些javascript来计算页面偏移和页脚高度等，并使导航div在朝向底部时绝对定位，但它似乎就像它可能是矫枉过正。

我正在寻找的行为是当页脚开始出现在页面上时，它会“推动”导航器，而不是仅仅放在顶部（或下面）。

提前致谢！

Answer 1

Check this fiddle

<强> JQuery的

var r=$('#hello').offset().top;
$(window).scroll(function() {
var s=r - $(window).scrollTop();
if(s <= $('#header').height()) {
    $('#header').css({'position':'absolute'});
}
else{
    $('#header').css({'position':'fixed'});
}
});

Updated fiddle with footer pushing header effect

---

要推送导航而不是标题，可以使用JQuery替换导航ID而不是标题

See this fiddle /观看Fullscreen

Answer 2

你的意思是：

 #footer {
    background-color: #0098e9;
    height: 200px;
    z-index: -20;
    position:relative; /*add this*/
}