Question

如果你去here，你会看到一个可能设置为CSS position:fixed的“Danger Will Robinson”按钮。向下滚动页面时，它会停留在窗口/视口的顶部。请注意，这个框周围有一个白色的盒子阴影（或一个fadeOut效果？）。因此，当您向下滚动页面时，所有元素（主要是灰色按钮）似乎都会淡出。

我正在试图弄清楚如何抓住这个很酷的“滚动向下，内容在页面上看起来似乎要淡出”的效果。这有点过头了。

Answer 1

它只不过是线性渐变。

请看它的样式

background: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
padding: 24px 0;
position: relative;
z-index: 999;
pointer-events: none;
max-width: 668;

Answer 2

使用渐变渐变到透明的渐变。具体规则是：

linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))

根据需要调整供应商前缀。

Answer 3

有an example demo here。简单地改变：

#bottom_fade {
    ...
    bottom: 0px;
    background: /* yadda yadda */
}

为：

#bottom_fade {
    ...
    top: 0px;
    /* as the other answers have explained */
    background: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

将达到您所寻求的效果。

淡出固定元素。

3 个答案: