@beergreezen
начинающий в front-end и IT

Координаты в мобильных устройствах?

Дали сделать небольшую правку на странице сайта ( песочница: dme.insider-tour.com/St-Petersburg-2-Days.html ). Необходимо прикреплять к верху менюшку "choose your tour".
На десктопе работает, а на iphone, ipad не хочет.
1. при прокрутке до самого низа и обратно вверх меню внезапно (почему-то срабатывает это условие в коде) возвращается на свое место в разметке;
2. при прокрутке примерно до середины и обратно вверх, менюшка так и остается приклееной к шапке (т.е. отклеивается на своем месте, но снова прыгает вверх)
Может, кто подскажет, в чём загвоздка?

Код js для определения координат и вырезания/копирования элемента в другое место в разметке (изначально добавлял/удалял класс с position:fixed, но проблема, похоже, именно в рассчете координат мобильным браузером):
/**
 * Created on 04.02.2016.
 */
$(document).ready(function(){
    var coordEl,
        box,
        body = document.body,
        docEl = document.documentElement,
        scrollTop,
        clientTop,
        $optuonLine = $('.optuon_line');

    /* getting top coordinate of element */
    function getCoords(){

        box = $('.optuon_line')[0].getBoundingClientRect();

        scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
        clientTop = docEl.clientTop || body.clientTop || 0;

        coordEl = box.top + scrollTop - clientTop;
    }

    /* condition when to change element's place */
    function pageScroll(){
        var top = window.pageYOffset || document.documentElement.scrollTop,
            HEIGHT_HEADER = $('#hed')[0].offsetHeight;

        top += HEIGHT_HEADER;

        if (top >= coordEl) {
            console.log('top: ', top, ' > coordElement: ', coordEl);

            $optuonLine.css('background-color', 'yellow');
            $optuonLine.detach();
            $optuonLine.appendTo('#hed');

        } else if (top < coordEl) {
            console.log('top: ', top, ' < coordElement: ', coordEl);

            $optuonLine.css('background-color', 'lightgreen');
            $optuonLine.detach();
            $optuonLine.appendTo('.optuon_line-wrapper');

        }
    }

    getCoords();

    $(window).resize(function() {
        getCoords();
    });

    $(window).scroll( $.throttle( 2000, pageScroll ) );

});
  • Вопрос задан
  • 134 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы