0

スクロールに基づいて1つの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 ファイルを置き換えてみてください。

お役に立てれば。

これは私のシステムで正常に動作している完全なページです

<!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 に答える