Question

我需要什么：

从页面底部覆盖动画到元素ID。
可滚动
不显示其背后的内容

不知道为什么我无法解决这个问题。这就是我所拥有的：

.overlay {
    position: fixed;
    z-index: 1000;
    height: 0%;
    filter: alpha(opacity=100);
    opacity: 1;
    top: 100%;
    bottom: 0;
    right: 0;
    left: 0;
    background: #141414;
}

然后我的js，我只是将20%作为任意数字，将尝试根据特定元素的位置来计算它。

  $("#overlay").animate({
    top: '20%',
    height: '100%'
  }, 1500);

Here是一个极小的例子。

你可能会看到一堆空白，这与问题无关，只是我在本地拥有的资产，我不需要放入小提琴。如果你下到蓝色方框并按下其中一个锚标签，你就会看到发生了什么。

发生了什么：

覆盖确实占据了大部分页面，这就是我想要的。但是，您仍然可以滚动它。

为什么这不是我想要的？

我只是希望能够触发覆盖页面的叠加层，而不是让您在其后面滚动，并让您滚动叠加层。

我在谷歌搜索时发现了5-6个其他叠加层，他们只是自动显示（没有动画）或者他们不适合我的其他html 。

有什么建议吗？

Answer 1

在您的JS功能中，您定位的是ID，而在您的css中，您定位的是一个类。要在jQuery中使用类名定位元素，请使用.。要定位ID，请使用#符号。

 $("#overlay").animate({
    top: '20%',
    height: '100%'
 }, 1500);

.overlay {
    position: fixed;

无法正确叠加

1 个答案: