Hover menu effect and scrolling

Question

I've found amazing hover menu script written by a user of Codepen, but I encountered problem which I can't solve myself. I'm hoping that anyone here can help me with it. I would really appreciate it.

The Problem is that if I want to add content making website scrollable and after we scroll it down the fixed Gooey Hover Effect which should stick to mouse position scroll down itself and doesn't follow mouse pointer anymore.

The Code

Here the link to the Codepen

HTML

<div id="menu">
    <div class="hamburger">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
    <div class="menu-inner">

        <ul>
            <li>Menu Item</li>
            <li>Menu Item</li>
            <li>Menu Item</li>
            <li>Menu Item</li>
            <li>Menu Item</li>
            <li>Menu Item</li>
        </ul>
    </div>



    <svg version="1.1" id="blob"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path id="blob-path" d="M60,500H0V0h60c0,0,20,172,20,250S60,900,60,500z"/>
    </svg>
</div>

CSS

        body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background-color:#26394E ;
    }

    #menu {
        height: 100%;
        position: fixed;
        background-color: #FED057;
        width: 300px;
        transition: 1000ms all cubic-bezier(0.19, 1, 0.22, 1);
        transform: translateX(-100%);
        left: 60px;
    }

    #menu.expanded {
        transform: translateX(0%);
        left: 0px;
    }

    .menu-inner {
        width: 100%;
        height: 100%;
        position: relative;
    }

    #blob {
        top: 0;
        z-index: -1;
        right: 60px;
        transform: translateX(100%);
        height: 100%;
        position: absolute;
    }

    #blob-path {
        height: 100%;
        fill:  #FED057;
    }

    .hamburger {
        right: 20px;
        position: absolute;
        width: 20px;
        height: 20px;
        margin-top: -10px;  
    }

    .hamburger .line {
        width: 100%;
        height: 4px;
        background-color: #fff;
        position: absolute;
    }

    .hamburger .line:nth-child(2) {
        top: 50%;
        margin-top: -2px;
    }

    .hamburger .line:nth-child(3) {
        bottom: 0;
    }

    h1 {
        position: fixed;
        right: 0;
        margin: 0;
    }

    ul {
        padding: 0;
        list-style: none;
        width: 80%;
        margin-left: 10%;
        position: absolute;
        top: 10px;
    }

    ul li {
        color: #fff;
        font-family: sans-serif;
        padding: 20px 0;
    }

    p {
        position: absolute;
       left: 10%;
  color: #fff;
        margin: 0;
  width: 500px;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 100;
    }

JS

$(window).load(function(){
var height = window.innerHeight,
x= 0, 
y= height/2,
curveX = 10,
curveY = 0,
targetX = 0,
xitteration = 0,
yitteration = 0,
menuExpanded = false;

blob = $('#blob'),
blobPath = $('#blob-path'),

hamburger = $('.hamburger');

$(this).on('mousemove', function(e){
    x = e.pageX;

    y = e.pageY;
});

$('.hamburger, .menu-inner').on('mouseenter', function(){
    $(this).parent().addClass('expanded');
    menuExpanded = true;
});

$('.menu-inner').on('mouseleave', function(){
    menuExpanded = false;
    $(this).parent().removeClass('expanded');
});

function easeOutExpo(currentIteration, startValue, changeInValue, totalIterations) {
    return changeInValue * (-Math.pow(2, -10 * currentIteration / totalIterations) + 1) + startValue;
}

var hoverZone = 150;
var expandAmount = 20;

function svgCurve() {
    if ((curveX > x-1) && (curveX < x+1)) {
        xitteration = 0;
    } else {
        if (menuExpanded) {
            targetX = 0;
        } else {
            xitteration = 0;
            if (x > hoverZone) {
                targetX = 0;
            } else {
                targetX = -(((60+expandAmount)/100)*(x-hoverZone));
            }           
        }
        xitteration++;
    }

    if ((curveY > y-1) && (curveY < y+1)) {
        yitteration = 0;
    } else {
        yitteration = 0;
        yitteration++;  
    }

    curveX = easeOutExpo(xitteration, curveX, targetX-curveX, 100);
    curveY = easeOutExpo(yitteration, curveY, y-curveY, 100);

    var anchorDistance = 200;
    var curviness = anchorDistance - 40;

    var newCurve2 = "M60,"+height+"H0V0h60v"+(curveY-anchorDistance)+"c0,"+curviness+","+curveX+","+curviness+","+curveX+","+anchorDistance+"S60,"+(curveY)+",60,"+(curveY+(anchorDistance*2))+"V"+height+"z";

    blobPath.attr('d', newCurve2);

    blob.width(curveX+60);

    hamburger.css('transform', 'translate('+curveX+'px, '+curveY+'px)');

$('h2').css('transform', 'translateY('+curveY+'px)');
    window.requestAnimationFrame(svgCurve);
}

window.requestAnimationFrame(svgCurve);
});

Answer 1

Here problem is pageY is counting in relative to body not in relative to window.

In place of countY I have uses (y - window.scrollY) several places and its worked.

Javascript code is here

$(window).load(function(){
    var height = window.innerHeight,
  x= 0, y= height/2,
    curveX = 10,
    curveY = 0,
    targetX = 0,
    xitteration = 0,
    yitteration = 0,
    menuExpanded = false;

    blob = $('#blob'),
    blobPath = $('#blob-path'),

    hamburger = $('.hamburger');

    $(this).on('mousemove', function(e){
        x = e.pageX - window.scrollX;

        y = e.pageY - window.scrollX;
    });

    $('.hamburger, .menu-inner').on('mouseenter', function(){
        $(this).parent().addClass('expanded');
        menuExpanded = true;
    });

    $('.menu-inner').on('mouseleave', function(){
        menuExpanded = false;
        $(this).parent().removeClass('expanded');
    });

    function easeOutExpo(currentIteration, startValue, changeInValue, totalIterations) {
        return changeInValue * (-Math.pow(2, -10 * currentIteration / totalIterations) + 1) + startValue;
    }

    var hoverZone = 150;
    var expandAmount = 20;

    function svgCurve() {
        if ((curveX > x-1) && (curveX < x+1)) {
            xitteration = 0;
        } else {
            if (menuExpanded) {
                targetX = 0;
            } else {
                xitteration = 0;
                if (x > hoverZone) {
                    targetX = 0;
                } else {
                    targetX = -(((60+expandAmount)/100)*(x-hoverZone));
                }           
            }
            xitteration++;
        }

        if ((curveY > y-1) && (curveY < y+1)) {
            yitteration = 0;
        } else {
            yitteration = 0;
            yitteration++;  
        }

        curveX = easeOutExpo(xitteration, curveX, targetX-curveX, 100);
        curveY = easeOutExpo(yitteration, curveY, y-curveY, 100);

        var anchorDistance = 200;
        var curviness = anchorDistance - 40;

        var newCurve2 = "M60,"+height+"H0V0h60v"+((y -  window.scrollY)-anchorDistance)+"c0,"+curviness+","+curveX+","+curviness+","+curveX+","+anchorDistance+"S60,"+(curveY)+",60,"+((y -  window.scrollY)+(anchorDistance*2))+"V"+height+"z";

        blobPath.attr('d', newCurve2);

        blob.width(curveX+60);
        hamburger.css('transform', 'translate('+curveX+'px, '+(y -  window.scrollY)+'px)');

    $('h2').css('transform', 'translateY('+curveY+'px)');
        window.requestAnimationFrame(svgCurve);
    }

    window.requestAnimationFrame(svgCurve);

});