叠加div - 滚动内容

Question

我在这个网站上工作：http://www.massobservation.org。如果您点击“信息”，则会在内容的顶部显示div，如果您愿意，则会显示叠加。但是，当叠加层处于活动状态时，我希望该网站只能滚动到叠加div的内容。但是，您可以看到，即使覆盖结束（黄色背景结束），网站仍会滚动到底部。

这里给出了一个例子：http://cargocollective.com/montessori

有什么想法吗？非常感谢提前。

Answer 1

只要叠加层不是#top的子元素，这应该有效：

当叠加层打开时，请将此样式添加到主要内容中：

#top {
    position: fixed;
}

叠加层关闭后，删除样式。

Answer 2

你可以尝试的是：

• 当叠加层可见时，设置溢出：隐藏;关于主要内容。我在div .work-section上尝试了这个。
• 确保叠加内容不是主要内容的子级。现在它是.work-section div的孩子，把它移到外面。

这应该意味着只有叠加内容会导致浏览器滚动。

Answer 3

显示叠加层时，您可以执行以下操作：

a）关闭主文档的滚动 - $(document).css('overflow', 'hidden');

b）将叠加高度设置为窗口高度 - $(overlay).css('height', $(window).height()+'px');

c）设置溢出：自动覆盖 - $(overlay).css('overflow', 'auto');

这应确保滚动仅适用于叠加内容的结尾。