溢出-y，固定元素和滚动条的噩梦

Question

我有一个包含大量内容的经典页面，以及一个打开弹出窗口的按钮。这个弹出窗口的高度可能比我的窗口大，所以我需要在弹出窗口中滚动。当我隐藏触发器时，我希望滚动位置与显示此弹出窗口之前完全相同。我尝试了很多解决方案，而且...不完全是这样:) 你可以在 JSfiddle 上看到一个例子：http://jsfiddle.net/S6EFW/11/ 我很接近，但滚动条在菜单下，我不知道如何解决这个问题...... :(

你可以在今日美国的网站上看到我想要做什么：http://www.usatoday.com/

如果您稍微滚动一下，然后单击其中一篇主要文章，则会显示一个弹出窗口。您可以在此弹出窗口中滚动。当您关闭弹出窗口时，您与打开弹出窗口之前处于完全相同的页面位置。

我尝试过使用：

  overflow-y:scroll;

但滚动条和固定菜单仍有问题... :(

如果您对实现该目标的方法有想法！

Answer 1

对于您的#content，请尝试使用margin 而不是padding：

#content {
  margin-top : 100px;
  padding-top:10px;
}

检查这个http://jsfiddle.net/S6EFW/18/

Answer 2

将z-index:-999; 添加到您的#hello

所以：

#hello {
    position : absolute;
    top : 0px;
    width : 100%;
    height : 100px;
    background-color : #123456;
    z-index:-999;