Question

我正在尝试根据滚动为一个div添加淡入淡出效果，以下是相同的代码

<script type="text/javascript">
$(document).ready(function(e)
{
         $(window).scroll(function() {
            var currpos = $(window).scrollTop();
            if(currpos < 199)
            {
                if(currpos > 100)
                {
                    alert('100');
                    //$('#header').fadeTo(1,0.8,function(){});
                }
            }
            else if(currpos < 299)
            {
                if(currpos > 200)
                {
                    alert('200');
                    //$('#header').fadeTo(1,0.6,function(){});
                }
            }
            else if(currpos < 399)
            {
                if(currpos > 300)
                {
                    alert('300');
                    //$('#header').fadeTo(1,0.4,function(){});
                }
            }
            else if(currpos < 499)
            {
                if(currpos > 400)
                {
                    alert('400');
                    //$('#header').fadeTo(1,0.2,function(){});
                }
            }
            else if(currpos < 599)
            {
                if(currpos > 500)
                {
                    alert('500');
                    //$('#header').fadeTo(1,0.1,function(){});
                }
            }
            else
            {
                alert("WOW");   
            }
     });
});
</script>

问题是此代码在Firefox和IE中运行良好。但不适用于Chrome，Safari和歌剧。此外，当我拖动滚动条时，代码工作得很好，但是当我使用鼠标滚轮时，代码不能正常工作。

非常感谢有关此方面的任何帮助。

提前致谢！

Answer 1

我试图按如下方式复制您的问题：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e)
{
         $(window).scroll(function() {
            var currpos = $(window).scrollTop();
.
.
.
    }

发现它在所有浏览器上都能正常运行，请尝试使用上面添加的jQuery文件。

希望这有帮助。

这是在我的系统上正常运行的完整页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e)
{
$(window).scroll(function() {
var currpos = $(window).scrollTop();
alert(currpos);
if(currpos < 199)
{
if(currpos > 100)
{
alert('100');
//$('#header').fadeTo(1,0.8,function(){});
}
}
else if(currpos < 299)
{
if(currpos > 200)
{
alert('200');
//$('#header').fadeTo(1,0.6,function(){});
}
}
else if(currpos < 399)
{
if(currpos > 300)
{
alert('300');
//$('#header').fadeTo(1,0.4,function(){});
}
}
else if(currpos < 499)
{
if(currpos > 400)
{
alert('400');
//$('#header').fadeTo(1,0.2,function(){});
}
}
else if(currpos < 599)
{
if(currpos > 500)
{
alert('500');
//$('#header').fadeTo(1,0.1,function(){});
}
}
else
{
alert("WOW");   
}
});
});
</script>
</head>
<body style="height:2000px;">
</body>
</html>

复制粘贴并尝试一次。

Chrome浏览器中的jQuery滚动问题，Opera＆amp;苹果浏览器

1 个答案: