jquery - 淡出固定元素。

Question

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

我试图弄清楚如何抓住这个很酷的“当你向下滚动时，页面顶部的内容似乎是淡出”的效果。这有点过头了。

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

这里有一个示例演示。简单地改变：

#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));
}

会达到你想要的效果。