Обработка и использование значения сдвига горизонтального скролла
 

Добрый день!

Есть сайт с длинным горизонтальным скроллом. Задача стоит следующая: когда юзер немного проскроливает сайт, то сверху выезжает плашка. Когда возвращает скролл в начало - плашка обратно задвигается.

Вначале была проблема с определением самого значения скролла, нашел вот эту универсальную(вроде бы) функцию:

function getPageScroll() {
        var xScroll;
        if (self.pageXOffset) {
                xScroll = self.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollLeft) {
                xScroll = document.documentElement.scrollLeft;
        } else if (document.body) {
                xScroll = document.body.scrollLeft;
        }
        return xScroll
}

Отрабатывает она хорошо, координата вычисляется верно.

Теперь нужно проверить, достигли ли мы определенной позиции и если достигли предпринять соответствующие действия
Делаем это с помощью функций JQuery

$(window).scroll(function() {     
            myvar = getPageScroll(); 
            if (myvar <= 650){
                $("#popup").animate({top: -52}, 100);
            }             
            if (myvar >= 750){
                $("#popup").animate({top: 0}, 500);
            }                                    
    });

И вот тут получаем очень странное поведение.
Первый раз функция вроде бы отрабатывает.
Наша плашка выезжает и если аккуратно крутануть колесиком назад сразу как она выехала - она задвигается. Если же прокрутить далеко вперед, то она может вообще не задвинуться назад. А может и задвинуться, но совсем не там где нужно. Полная анархия :)
При этом значение myvar - верное в каждом положении скролла (проверял через хромовскую js консоль).

Отчего так происходит?

Помогите разобраться, пожалуйста.

может быть, надо останавливать старую анимацию перед началом новой?

Не совсем понял, о чём вы говорите. О том, что при каждом маленьком сдвиге анимация начинается заново?
Тогда бы плашка должна была дёргаться как сумасшедшая :)
А этого не происходит.
Но попробовать можно. Только как это сделать?

оно добавляется в очередь, поэтому при прокрутке на 10 пикселей вниз (например), а потом сразу на 15 пикселей вторая анимация добавится в очередь, если первая ещё не завершилась.

как остановить анимацию ? не скажу. с недавнего времени (15 минут назад) прояснилось, что людям надо помогать ссылкой, а не делом. Чтобы сами понимали, где допустили ошибку, и сами её исправляли, заодно предостерегая себя от совершения оной в будущем.

Так что, не в обиду, я вас посылаю (хихи) на страницу документации jQuery. я выбрал вам нужный вам раздел (анимирование). Нужную вам функцию найдите сами. Заодно прочтёте описание возможностей jQuery :)

моя любимая документация по jquery находится здесь. она на русском и часто дополняется и изменяется, так что возникнуть проблем не должно. А если возникнут - прошу пожаловать на официальную, английскую документацию. Чтобы было легче разобраться, что там такое, я выбрал нужный вам раздел.

....
PS вообще, не стоит анимировать положение элемента при прокрутке колёсиком. событий возникает тьма, поэтому это будет плохой идеей в соображениях производительности. Надо менять положение элемента сразу, а не со временем.

Спасибо большое за развернутый ответ!

Сделал так:

myvar = getPageScroll(); 
            if (myvar <= 849){
                $("#popup").stop();    
                $("#popup").animate({top: -100}, 200);
            }             
            if (myvar >= 850){
                $("#popup").stop();
                $("#popup").animate({top: 0}, 200);
            }

Стало лучше, намного.
Единственный минус который сейчас - если скроллить с помощью перетаскивания скролла мышкой, то выпадание 'тормозится' (что собственно и понятно).
Можно как-то это побороть?
Можно конечно сделать, что бы всплывайка появлялась мгновенно, но очень хочется, что бы плавно.

Догадался сам :)

$(window).scroll(function() {
            topvar = $("#popup").css('top');
            myvar = getPageScroll(); 
            if ((myvar <= 800) && (topvar == '0px')){
                $("#popup").animate({top: -100}, 200);
            }             
            if ((myvar >= 900) && (topvar == '-100px')){                
                $("#popup").animate({top: 0}, 200);
            }                                    
    });

Теперь всё работает так как должно. И $("#popup").stop(); даже не нужен