Эффект меню наведения и прокрутка

Question

Я нашел удивительный сценарий меню наведения, написанный пользователем Codepen, но я столкнулся с проблемой, которую я не могу решить самостоятельно. Я надеюсь, что кто-нибудь может помочь мне с этим. Я был бы очень признателен.

Проблема заключается в том, что если я хочу добавить прокручиваемый веб-сайт для создания контента, и после того, как мы прокрутим его вниз, зафиксированный эффект Gooey Hover, который должен придерживаться позиции мыши, прокрутите вниз вниз и больше не следуйте указателю мыши.

Кодекс

Здесь ссылка на 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

Здесь проблема pageY относится к body не относится к window.

Вместо countY У меня есть (y - window.scrollY) несколько мест и его работа.

Javascript код здесь

$(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); 

});