在 HTML 元素中逐渐 appear/fade 滚动 down/up

Question

我正在尝试创建以下效果：

除非您向下滚动 100 像素或更多，否则您将看不到该元素（例如 div）。
当您滚动 100 像素并继续滚动时，div 元素将以平滑的方式出现，并且当它完全显示时您滚动了 200 像素。

这意味着它不会像过渡效果那样出现。但是，如果假设您滚动 150 像素，您可以看到具有透明效果的 div 元素（50%，因为它在 100 像素时开始淡入，在 200 像素时开始淡入px 它已经完全显示出来了）。如果滚动 175 像素，您可以看到更多 div。如果您达到 200 像素并继续向下滚动，div 将保持可见。

同样的备份：如果你向上滚动它会逐渐消失。

这主要针对Android页面：屏幕顶部的header会逐渐出现，然后停留在顶部（使用position: fixed;）。

我唯一要澄清的最后一件事是，制作此效果将意味着 css 将不断变化：在 120 像素处，opacity 将具有 0.2（20 % 可见），在 0.55 的 155，在 0.83 的 183。

注意：有可能！我以前见过！ =)

Answer 1

如果我没看错，试试这个：

$( window ).scroll(function() {
    var top = $( window ).scrollTop( );
    var opacity = (top-100)/100;    
    fixedElement.css("opacity",opacity);
});

演示：

https://jsfiddle.net/8zhLgjsj/1/

在 HTML 元素中逐渐 appear/fade 滚动 down/up

Gradually appear/fade in HTML element as you scroll down/up

html

javascript

css

jquery

effect