0

我正在尝试基于滚动为一个 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 和 Opera 中。此外，当我拖动滚动条时，代码工作得非常好，但在我使用鼠标滚轮时却不行。

对此的任何帮助将不胜感激。

提前致谢！

4

1 回答 1

0

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

<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 文件替换您的 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>

复制粘贴并尝试一次。

于 2013-09-26T12:42:30.387 回答