javascript - Why does the clientX and Y change on scroll? -

i created shape follows mouse x , y coordinates on mouse movement. can check result here: http://codepen.io/anon/pen/qnkgqo

this work fine , shape in center of mouse cursor. unfortunately have problems it.

as can see in demo have 1 section , positioned @ top of screen. @ top of of html markup notice comment out section. if remove comment markup, new section set. when hover on items, result same before, when scroll next section - 1 3 thumbs, notice shape not centered mouse, it's way offset. when hover on bottom, see little piece of shape.

to center circle center of mouse cursor use following script:

  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 = (event.clienty - top) - height / 2; 

above code mousemove function, triggered on mouse movement.

my question wrong of missing in code. when there 1 section works should works, after adding section html markup, messed up.

i looking forward responses. hope there solution that!

pagex , pagey:

relative top left of rendered content area in browser. reference point below url bar , button in upper left. point anywhere in browser window , can change location if there embedded scrollable pages embedded within pages , user moves scrollbar.

so use pagex , pagey instead of clientx/y:

  var mx = (event.pagex - left) - width / 2;   var = (event.pagey - top) - height / 2; 

for more detail read difference between clientx/y , pagex/y?