Custom cursor not moving with scroll

Site URL: https://lukaseriksen.com

I've implemented a custom cursor into my website (https://lukaseriksen.com) but when scrolling the cursor doesn't seem to move with the screen, it only updates it's position when you move the mouse position again. 

Is there any way to fix this?

Here is the code I used:

<div class="cursor cursor-dot"></div>
<style>
  @media (hover: none) {
    .cursor {display:none !important;
    }
  }
  * {
    cursor: none !important;
  }
  .cursor {
    --size: 30px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .cursor.cursor-dot {
    background: #ffffff;  /* This defines the color of the cursor */
    mix-blend-mode: difference;  /* Delete this line if you dont want the circle to invert */
    transition: width .3s, height .3s,
      background-color .3s;
    transition-timing-function: ease-out;
  }
  .cursor-dot.active {
    --size: 50px;
    background-color: #ffffff;
  }
</style>
<script>
  $(window).mousemove(function(e) {     
    $(".cursor").css({
      left: e.pageX,
      top: e.pageY
    })    
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseenter", function() {   
      $('.cursor').addClass("active")   
    })  
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseleave", function() {    
      $('.cursor').removeClass("active")    
    })
  });
</script>

Any update here? I've tried to use this code as well but I'm getting an error:

Any idea where that should go in the code? @LukasEriksen

On 1/14/2021 at 12:21 AM, veronicawastaken said:

Any update here? I've tried to use this code as well but I'm getting an error:

missing opening `{`

Any idea where that should go in the code? @LukasEriksen

 

remove <style> and </style>

Modified from @creedon 

The following code works for me:

Add the following to Design > Custom CSS.

* {
  cursor: none;
  }

.cursor {
  --size: 30px;
  height: var( --size );
  width: var( --size );
  border-radius: 50%;
  pointer-events: none;
  position: fixed;
  transform: translate( -50%, -50% );
  z-index: 99999999999;
  
  }

.cursor.cursor-dot {
  background: #ffffff; /* This defines the color of the cursor */
  mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */
  transition: width 0.3s, height 0.3s, background-color 0.3s;
  transition-timing-function: ease-out;
  }

.cursor-dot.active {
  --size: 50px; 
  background-color: #ffffff;
  }

Add the following to Settings > Advanced > Code Injection > HEADER. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

Add the following to Settings > Advanced > Code Injection > FOOTER. 
 

<script>
  $( ( ) => {
    
   $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );
    
    var cursor = $(".cursor");
    
    $( window ).mousemove ( function ( e ) {
      cursor.css ( {  
               top: e.clientY,
            left: e.clientX 
        } );   
      } );
      
    $( window ).mousemove ( function ( e ) {
      $( 'a' ).on ( 'mouseenter', function ( ) { 
        cursor.addClass ( 'active' );
        } );
      } ); 
    
    $( window ).mousemove ( function ( e ) {
      $( 'a' ).on ( 'mouseleave', function ( ) {
        cursor.removeClass ( 'active' );
        } );
      } );
    } );
    
  </script>

Pointing to some additional troubleshooting and clarifications for this code, for any future users!