我正在尝试实现类似于 Apple News 的效果，其中照片在滚动时淡入，但一旦达到 100% 不透明度，它就不会淡出。 This video demonstrates the fade in:然而，它并没有表明它完全淡入。
我已经有了淡入效果，我只是不确定如何在达到该效果后将不透明度保持在 100%。我在下面添加了一些我所拥有的模拟代码，但出于某种原因它似乎无法在 stackoverflow 上正确执行？ 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();<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>最佳答案
这里有几种方法可以实现您想要的效果，并防止元素在淡入后又淡出。
如果不透明度为 100%，则提前返回
如果不透明度已经是 1.0，那么您不想更改它，因此如果您检测到这一点，您可以从滚动回调中提前返回。
$(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);
}
});
或者
元素淡入后解除事件绑定(bind)
如果预计该元素永远不会淡入，您可以删除该事件
function scrollCallback(){
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);
// NOTE: If we've faded in completely then we don't need the event anymore
if (opacity1 >= 1.0) {
$(document).unbind('scroll', scrollCallback);
}
}
};
$(document).bind('scroll', scrollCallback);
希望这些选项之一适合您!
关于javascript - 对象达到 100% 不透明度后停止 JQuery Opacity 基于滚动的效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54953451/