jQuery jquery淡出带有页面滚动的div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27890007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery fade out div with page scroll
提问by Sam Skirrow
I am trying to fade a div out as the page scrolls down (with the page scroll - not just a fadeOut effect). I'm adjusting the opacity of the div as the page scrolls down using this piece of code here:
我试图在页面向下滚动时淡出 div（页面滚动 - 不仅仅是淡出效果）。当页面向下滚动时，我正在使用这段代码调整 div 的不透明度：
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$('.logo_container').css({'opacity':( 100-scroll )/100});
});
My issue here is that for me it fades out too fast, I'd like a much more subtle fade as the user scrolls. Can anyone think of a better logic to make a slower, more subtle fade out.
我的问题是，对我来说它淡出太快了，我想要在用户滚动时更微妙的淡出。谁能想到更好的逻辑来制作更慢，更微妙的淡出效果。
here is a JSFIDDLEshowing my code in action
这是一个JSFIDDLE显示我的代码在行动
回答by Kunjan Thadani
This works fine with this FIDDLEwith very simple logic. Used this piece of jquery to make it work:
这对于具有非常简单逻辑的FIDDLE 来说效果很好。使用这段 jquery 使其工作：
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var height = $(window).height();
$('.logo_container, .slogan').css({
'opacity': ((height - scrollTop) / height)
});
});
(height - scrollTop) / heightgives value set which is linear form 1 to 0.
(height - scrollTop) / height给出了从 1 到 0 的线性形式的值集。
Example:
例子：
height=430px and scrollTop=233px.
高度=430px 和 scrollTop=233px。
(height - scrollTop) / height will give opacity 0.45 approx.
(height - scrollTop) / height 将给出约 0.45 的不透明度。
回答by Tymek
Solution A
方案一
jQuery animate
jQuery 动画
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$('.logo_container, .slogan').stop().animate(
{opacity: (( 180-scroll )/100)+0.1},
"slow"
);
});
Solution B
方案B
CSS transition
CSS 过渡
.wrapper {
height:1000px
}
.logo_container {
background:red;
width:250px;
height:500px;
position:relative;
margin:0px auto;
transition: opacity 1s ease;
}
