我正在尝试实现类似于Apple News的效果，其中一张照片在滚动时淡入，但是一旦达到100％的不透明度，它就不会淡出。但是它并没有证明它完全褪色。
我的淡入效果已经有效，我只是不确定如果达到那个值，如何将不透明度保持在100％。我在下面添加了一些模拟代码，但无论出于什么原因，它似乎无法在stackoverflow上正确执行？ This video demonstrates the fade in:
It does work on codepen though
function fadeIn() {
$(document).scroll(function(){
var scrollPos = $(this).scrollTop();
var parallaxTop = $('#fade1').offset().top;
var parallaxStart = parallaxTop * .1;
var opacity1 = (scrollPos - parallaxStart);
if ($(this).scrollTop() >= parallaxStart) {
$('#fade1').css('opacity' , 0 + opacity1);
}
})
}
fadeIn();这里有几种方法可以实现您正在寻找的东西，并防止元素一旦消失就淡化回来。
如果不透明度已经为1.0，那么您不想更改它，因此如果您检测到它，您可以从滚动回调中提前返回。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
</head>
<body>
<div style="display: block; width:300px;">
<h1>Take Charge</h1>
<h4>Transform your body with a personal trainer in 2019</h4>
</div>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<div id="fade1" style="display: block; width:300px;">
<h1>Take Charge</h1>
<h4>Transform your body with a personal trainer in 2019</h4>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br><p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
</body>要么
如果预期该元素永远不会淡入，您可以删除该事件
$(document).scroll(function(){
// NOTE: Check the opacity and don't change it if the element has
// already faded in completely
if($('#fade1').css('opacity') === 1) return;
var scrollPos = $(this).scrollTop();
var parallaxTop = $('#fade1').offset().top;
var parallaxStart = parallaxTop * .1;
var opacity1 = (scrollPos - parallaxStart)/600;
if ($(this).scrollTop() >= parallaxStart) {
$('#fade1').css('opacity' , 0 + opacity1);
}
});
希望其中一个选项适合您！