Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.09.2011, 19:06
Аватар для LostSenSS
Интересующийся
Отправить личное сообщение для LostSenSS Посмотреть профиль Найти все сообщения от LostSenSS
 
Регистрация: 19.01.2011
Сообщений: 14

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

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

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

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 консоль).

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

Помогите разобраться, пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 03.09.2011, 21:19
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

может быть, надо останавливать старую анимацию перед началом новой?
Ответить с цитированием
  #3 (permalink)  
Старый 03.09.2011, 22:06
Аватар для LostSenSS
Интересующийся
Отправить личное сообщение для LostSenSS Посмотреть профиль Найти все сообщения от LostSenSS
 
Регистрация: 19.01.2011
Сообщений: 14

Сообщение от melky Посмотреть сообщение
может быть, надо останавливать старую анимацию перед началом новой?
Не совсем понял, о чём вы говорите. О том, что при каждом маленьком сдвиге анимация начинается заново?
Тогда бы плашка должна была дёргаться как сумасшедшая
А этого не происходит.
Но попробовать можно. Только как это сделать?
Ответить с цитированием
  #4 (permalink)  
Старый 03.09.2011, 22:18
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

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

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

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

....
PS вообще, не стоит анимировать положение элемента при прокрутке колёсиком. событий возникает тьма, поэтому это будет плохой идеей в соображениях производительности. Надо менять положение элемента сразу, а не со временем.
Ответить с цитированием
  #5 (permalink)  
Старый 05.09.2011, 13:06
Аватар для LostSenSS
Интересующийся
Отправить личное сообщение для LostSenSS Посмотреть профиль Найти все сообщения от LostSenSS
 
Регистрация: 19.01.2011
Сообщений: 14

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

Сделал так:

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


Стало лучше, намного.
Единственный минус который сейчас - если скроллить с помощью перетаскивания скролла мышкой, то выпадание 'тормозится' (что собственно и понятно).
Можно как-то это побороть?
Можно конечно сделать, что бы всплывайка появлялась мгновенно, но очень хочется, что бы плавно.
Ответить с цитированием
  #6 (permalink)  
Старый 05.09.2011, 18:24
Аватар для LostSenSS
Интересующийся
Отправить личное сообщение для LostSenSS Посмотреть профиль Найти все сообщения от LostSenSS
 
Регистрация: 19.01.2011
Сообщений: 14

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

$(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(); даже не нужен

Последний раз редактировалось LostSenSS, 05.09.2011 в 18:28.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск