Проблема в jQuery Scroll в Chrome, Opera и Safari

Question

Проблема в jQuery Scroll в Chrome, Opera и Safari

0

Я пытаюсь добавить эффект fadeto для одного 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. Кроме того, код работает отлично, когда я перетаскиваю полосу прокрутки, но не тогда, когда я использую колесико мыши.

Любая помощь в этом отношении будет очень оценена.

Заранее спасибо!

Pratik Ghela 26 сен. 2013, в 14:37

Источник

Теги:

javascript

jquery

html

scroll

google-chrome

1 ответ

Ещё вопросы

Sunil Verma · Answer 1 · 2013-09-26T10-17-00.000Z

я попытался воспроизвести вашу проблему следующим образом:

<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();
.
.
.
    }

И обнаружил, что он отлично работает на всех браузерах, попробуйте сделать rpelace ваш файл 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>

скопируйте пасту и попробуйте один раз.

я отредактировал свой ответ, пожалуйста, проверьте еще раз.