我正在寻找一种方法来更改 div (.header) 的不透明度以仅在滚动时更改。
所以基本上,当您滚动时,它几乎变得不透明,但当您停止滚动时,它又变得完全可见。
我寻找了一些脚本并一直以这些类型的 jQuery 脚本结尾,但这只是我正在寻找的解决方案的一半:
$(window).scroll(function() {
if ($(this).scrollTop() > 400) {
$( ".header #background" ).fadeIn();
} else {
console.log('there');
$( ".header #background" ).fadeOut();
}
});
( http://jsfiddle.net/SEH5M/ )
有什么想法吗?
最佳答案
通过在每次滚动事件后使用超时检查(在本例中为 200 毫秒)以查看用户是否已停止滚动,您可以实现此效果。
fiddle :http://jsfiddle.net/SEH5M/276/
$( ".header #background" ).fadeIn(); //initial fadein
$(window).scroll(function() {
if(!$( ".header #background" ).hasClass('transition')){ //avoid multiple fades
$( ".header #background" ).stop().addClass('transition').fadeOut();
}
var position = $(window).scrollTop();
setTimeout(function(){
if(position - $(window).scrollTop() == 0){ //check if scroll position has changed
$( ".header #background" ).stop().removeClass('transition').fadeIn();
}
}, 200);
});
关于jquery - 仅在滚动时更改 div 的不透明度 - 静止时变回完全不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27159752/