Issues with div following mousemove while scrolling.

[silly.berlin]

Hey there,
My programming skills are very limited (learning by googling). Now I need your help :)

I'm trying to make a DIV following my mouse (www.silly.berlin). So far so simple:

<div id="sillydot"></div>
<style>
transform: translateX(-50%) translateY(-50%);
position: absolute;
display: block;
background-color: #000;
width: 1.25vw;
height: 1.25vw;
user-select: none;
pointer-events: none;
</style>
<script>
jQuery(document).ready(function() {
jQuery("*").css( 'cursor', 'none' );
jQuery("#sillydot").css( 'pointer-events', 'none' );
jQuery(document).mousemove(function(e) {
jQuery('#sillydot').css({
"left": e.pageX,
"top": e.pageY,
"z-index": "9999",
});
});
});
<script>

At the moment I'm trying to fix a problem which occurs when I'm scrolling my page. The DIV is scrolling with the content until I move my mouse again, then it jumps back into position. I guess I've to subtract the scrolled distance somehow. But how?

Thanks for helping!
Best
Robin

[mariusjopen]

Dear @silly-berlin
no worries. That is how you learn.
Have a look here:
http://laytheme.com/documentation.html#custom-javascript
Best!

Marius

[silly.berlin]

Solved it.
My mistake was:

<style>
#sillydot { position: absolute; };
</style>

<script>
jQuery(document).mousemove(function(e) { jQuery('#sillydot').css({
"left": e.pageX,
"top": e.pageY,
}); });
</script>

It should be:

<style>
#sillydot { position: fixed; };
</style>

<script>
jQuery(document).mousemove(function(e) { jQuery('#sillydot').css({
"left": e.clientX,
"top": e.clientY,
}); });
</script>

[mariusjopen]

Dear @silly-berlin

ah cool!

Thank you for telling us!

Marius