叠加div - 滚动内容

时间:2011-12-22 09:35:12

标签: jquery css html overlay

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

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

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

3 个答案:

答案 0 :(得分:2)

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

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

#top {
    position: fixed;
}

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

答案 1 :(得分:0)

你可以尝试的是:

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

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

答案 2 :(得分:0)

显示叠加层时,您可以执行以下操作:

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

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

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

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