Почему клиент X и Y меняются при прокрутке?

Question

Я создал форму, которая следует за вашими координатами мыши и x на движении мыши. Вы можете проверить результат здесь: http://codepen.io/anon/pen/qNKgqo

Это будет нормально работать, и форма находится в центре курсора мыши. К сожалению, у меня есть некоторые проблемы с этим.

Как вы можете видеть в demo У меня есть одна секция, расположенная в верхней части экрана. На самой верхней части HTML-разметки вы увидите раздел для комментариев. Если вы удалите разметку комментариев, будет установлен новый раздел. Когда вы наводите курсор на элементы, результат будет таким же, как и раньше, но когда вы переходите к следующему разделу - к одному из трех пальцев, вы заметите, что фигура не ориентирована на мышь, это смещение по порядку. Только когда вы нависаете над дном, вы увидите маленький кусочек фигуры.

до центра окружности к центру курсора мыши я использую следующий сценарий:

var target = $(this); 
    var dot = target.find('.pointer'); 

    var height = dot.height(); 
    var width = dot.width(); 

    var offset = target.offset(); 
    var top = offset.top; 
    var left = offset.left; 

    var mX = (event.clientX - left) - width/2; 
    var mY = (event.clientY - top) - height/2; 

Выше код из функции MouseMove, что срабатывают на движение мыши.

Мой вопрос в том, что я делаю неправильно, отсутствует в моем коде. Когда есть только один раздел, он работает так, как должен работать, но после добавления другого раздела в разметку HTML он будет испорчен.

Я с нетерпением жду ваших ответов. Надеюсь, есть какое-то решение!

Answer 1

pageX и Пейджи:

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

Так используйте pageX и Пейджи вместо clientX/Y:

var mX = (event.pageX - left) - width/2; 
    var mY = (event.pageY - top) - height/2; 

для более подробно прочитать разницу между clientX/Y and pageX/Y?