Дали сделать небольшую правку на странице сайта ( песочница:
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 ) );
});