我正在使用一个名为ParallaxFade的Javascript函数并对其进行了更改,因此该元素不会完全淡化为opacity: 0
。在Chrome中可以正常工作,但是当我在Safari中向上滚动(超出默认位置,在顶部触发橡皮筋)时,该元素完全消失。
我尝试将代码重置为淡化1-(scrollPos/100)
而不是分数0.01+(75/scrollPos)
的线性方式,并且在两种浏览器中都可以正常工作。
function parallaxFade() {
var scrollPos = $(this).scrollTop();
$('#element').css({
'background-position' : '50% ' + (-scrollPos/1)+"px"
});
$('#element').css({
'margin-top': (scrollPos/2)+"px",
'opacity': 0.01+(75/scrollPos)
});
}
$(document).ready(function(){
$(window).scroll(function() {
parallaxFade();
});
});
我真的不想恢复为将元素一直淡入
opacity: 0
的默认线性方式。有什么我可以忽略的简单事情吗?这是我从头开始构建的第一个网站(不使用CMS),所以请原谅我的无知。 最佳答案
我突然想到,问题可能出在scrollPos
变为0
时。快速的if
语句测试scrollPos > 0
修复了该问题。不再出现故障淡入淡出/滚动:
function parallaxFade() {
var scrollPos = $(this).scrollTop();
if (scrollPos > 0) {
$('#element').css({
'background-position' : '50% ' + (-scrollPos/1)+"px"
});
$('#element').css({
'margin-top': (scrollPos/2)+"px",
'opacity': 0.01+(75/scrollPos)
});
}