向下/向上滚动时，逐渐显示/淡入HTML元素

Question

我试图创造以下效果：

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

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

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

主要针对Android页面：屏幕顶部的标题会逐渐显示，然后会保持在顶部（使用position: fixed;）。

我必须澄清的最后一点是，制作此效果将意味着css将不断变化：在{120}，opacity将0.2（20％可见），在155 0.55的{​​{1}}，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/