Coordinates in mobile devices?

Question

css

They gave me a small edit on the site page (sandbox: dme.insider-tour.com/St-Petersburg-2-Days.html ). It is necessary to attach the "choose your tour" menu to the top.
It works on the desktop, but on the iphone, the ipad does not want to.
1. when scrolling to the very bottom and back up, the menu suddenly (for some reason this condition works in the code) returns to its place in the markup;
2. when scrolling to about the middle and back up, the menu remains glued to the header (ie, it peels off in its place, but jumps up again)
Can anyone tell me what's the catch?
The js code to determine the coordinates and cut/copy the element to another place in the markup (originally added/removed a class with position:fixed, but the problem seems to be in the calculation of the coordinates by the mobile browser):

/**
 * 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 ) );

});