Unblur part of an image where the mouse hovers over + scrolling handle

Question

I need to modify this solution https://stackoverflow.com/a/35101701/5908612

if we have huge by height image (and we try to scroll image to bottom), the blur effect is not working on bottom page. What i should change, that this effect (unblur spot) will work when a user is scrolling image to bottom ?

I think i need redraw mask or unblur spot, when image was scrolled p.s. Stackoverflow is resizing image size to small size...

var svgNS = "http://www.w3.org/2000/svg";

$('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1')[0];
    
    var circle = document.createElementNS(svgNS,"circle");
    circle.setAttribute("cx", upX);
    circle.setAttribute("cy", upY);
    circle.setAttribute("r", "30");
    circle.setAttribute("fill", "white");
    circle.setAttribute("filter", "url(#filter2)");
    
    mask.appendChild(circle);
    
    setTimeout(function(){ 
        circle.style.opacity = '0';
        setTimeout(function(){ 
            mask.removeChild(circle);
        }, 300);
    }, 300);
});

.pic {
    text-align: center;
    position: relative;
    height: 250px;
}
.blur {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}
circle {
   opacity: 1;
   -webkit-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pic">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" >
        <image filter="url(#filter2)" xlink:href="http://i.imgur.com/2SrFn0Q.jpg" width="528px" height="1042px"></image>
        <filter id="filter2">
            <feGaussianBlur stdDeviation="5" />
        </filter>
        <mask id="mask1">
            <circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
        </mask>
        <image xlink:href="http://i.imgur.com/2SrFn0Q.jpg" width="528px" height="1042px" mask="url(#mask1)"></image>
    </svg>
</div>

Answer 1

   var relativePosition = {
            left: event.pageX - $(document).scrollLeft() - $('.pic').offset().left,
            top : event.pageY - $(document).scrollTop() - $('.pic').offset().top
          };

this work :)