Jquery 是否有办法在航路点中表示从实际网站顶部到浏览器窗口当前顶部的偏移量？

我有一个以基本SVG动画开始的徽标。当用户向下滚动时，它会触发另一个动画，该动画会将徽标侧向推，并显示部分徽标。向上滚动时，徽标将滑回视图

这一切都很好

问题 如果我将页面重新加载到一半，或者（这很奇怪）将鼠标悬停在链接上，动画将重新启动，以便徽标可见并覆盖内容。这显然不是理想的效果

问题 有没有什么方法可以说是从页面顶部偏移20%，而不是从浏览器顶部偏移20%，这样动画就不会重新启动，或者如果它不是从实际顶部偏移20%，则不会执行任何操作

您可以看到徽标运行的速度（以及bug）

如何复制 加载页面，向下滚动一半，重新加载页面。您将看到完整的徽标，只有在用户再次滚动时才能再次隐藏该徽标（因为它测量的是浏览器窗口偏移量与页面顶部偏移量）

天啊，我希望这是有道理的。谢谢大家的意见

jQuery（文档）.ready（函数（$）{
//抚平
$（“#平滑徽标”）。航路点（功能（方向）{
如果（方向==‘向下’）{
$（'.fadeMe'）.addClass（'blur-in-fwd'）；
$（'.fadeMe'）.removeClass（'blur-in-bkw'）；
$（“#平滑徽标”）.addClass（'slideLeft'）；
$（“#平滑徽标”）.removeClass（'slideRight'）；
$（'#animOut'）.get（0.beginElement（）；//重新启动动画
}如果（方向=='up'）{
$（'.fadeMe'）.addClass（'blur-in-bkw'）；
$（'.fadeMe'）.removeClass（'blur-in-fwd-slide right'）；
$（“#平滑徽标”）.addClass（'slideRight'）；
$（“#平滑徽标”）.removeClass（'slideLeft'）；
$（'#animIn'）.get（0.beginElement（）；//重新启动动画
}
}, 
{偏移量：“0%”）；
});
.header{
最小高度：2000px；
位置：相对位置；
}
#光滑标志{
位置：固定；
}
/*主加载动画*/
杜皮纳尔先生{
动画：下降0.5s交替；
不透明度：0；
动画填充模式：正向；
}
.滴水{
动画延迟：0.4s；
}
.dropIn2{
动画延迟：0.5s；
}
.下降3{
动画延迟：0.6s；
}
/*幻灯片字母*/
斯莱德尔先生{
位置：相对位置；
动画：slideThis 5s备用；
动画持续时间：0.5s；
不透明度：0；
动画填充模式：正向；
}
@关键帧就是这样{
0%{opacity:0.2；-webkit transform:translateX（200px）；}
100%{opacity:1；-webkit transform:translateX（0px）；}
}
/**/
大人物{
动画延迟：0.5s；
}
/*T*/
.bigS1{
动画延迟：0.6s；
}
/*A*/
.bigS2{
动画：下降0.5s慢进慢出，色彩变化5s慢进30秒无限；
动画延迟：1.2s；
}
@关键帧下降{
0%{opacity:0.2；transform:translateY（-100px）；}
100%{不透明度：1；变换：translateY（0px）；}
}
@关键帧颜色更改{
0%{不透明度：1；填充：黑色；}
20%{不透明度：1；填充：黑色；}
50%{不透明度：1；填充：褐红色；}
100%{不透明度：1；填充：黑色；}
}
.bigS3{
动画延迟：0.9秒；
}
/*B*/
.bigS4{
动画延迟：1s；
}
/*L*/
.大人物5{
动画延迟：1.1s；
}
/*E*/
.bigS6{
动画延迟：1.2s；
}
/*滚动动画*/
.fwd中的模糊{
过滤器：url（#过滤器模糊）；
}
.bkw中的模糊{
过滤器：url（#过滤模糊）；
}
/*幻灯片动画*/
斯莱德莱夫特先生{
-webkit动画：向左滑动。5s立方贝塞尔（0.250、0.460、0.450、0.940）两种；
动画：向左滑动。5s立方贝塞尔（0.250、0.460、0.450、0.940）两种；
动画延迟：1.8s；
}
#过滤模糊{
动画延迟：2s！重要；
}
@关键帧向左滑动{
0% {
-webkit转换：translateX（0）；
变换：translateX（0）；
}
100% {
-webkit转换：translateX（-200px）；
转换：translateX（-200px）；
}
}
.幻灯片{
-webkit动画：向右滑动。5s立方贝塞尔（0.250、0.460、0.450、0.940）两种；
动画：向右滑动。5s立方贝塞尔（0.250、0.460、0.450、0.940）两种；
}
@关键帧向右滑动{
0% {
-webkit转换：translateX（-200px）；
转换：translateX（-200px）；
}
100% {
-webkit转换：translateX（0px）；
转换：translateX（0px）；
}
}
/*滚动动画*/
@关键帧文本模糊{
0% {
-webkit过滤器：模糊（0.01）；
过滤器：模糊（0.01）；
}
100% {
-webkit过滤器：模糊（12px）不透明度（0%）；
滤镜：模糊（12px）不透明度（0%）；
}
}
@关键帧中的文本模糊{
0% {
-webkit过滤器：模糊（12px）不透明度（0%）；
滤镜：模糊（12px）不透明度（0%）；
}
100% {
-webkit过滤器：模糊（0.01）；
过滤器：模糊（0.01）；
}
}

稳定平滑的徽标
没有对我的理论进行任何测试，在我看来，您遇到的问题与
上下文的默认值有关，即
窗口


你所说的
偏移量
是可以调整的，但是如果我是对的，不管它是
20%
还是
20px
，你的问题似乎在于你定义的是
窗口
上下文
的偏移量，而不是其他元素

如果尝试将
上下文
定义为
主体
元素，会发生什么情况

比如：

jQuery(document).ready(function($) {

    // Smooth OUT
    $('#smooth-logo').waypoint(function(direction) {

        if (direction === 'down') {

            $('.fadeMe').addClass('blur-in-fwd');
            $('.fadeMe').removeClass('blur-in-bkw');
            $('#smooth-logo').addClass('slideLeft');
            $('#smooth-logo').removeClass('slideRight');
            $('#animOut').get(0).beginElement(); // restart the animation

        } else if (direction === 'up') {  

            $('.fadeMe').addClass('blur-in-bkw');
            $('.fadeMe').removeClass('blur-in-fwd slide-right');
            $('#smooth-logo').addClass('slideRight');
            $('#smooth-logo').removeClass('slideLeft');
            $('#animIn').get(0).beginElement(); // restart the animation
        }
    }, 

    // { offset: '0%' });
    { offset: '0%', context: 'body' });

});

很抱歉，我没有看到带有悬停链接的错误，因此无法为您提供有关该错误的线索。
下面的工作片段，这就是您想要的吗？基本上，您不需要指定
#平滑徽标
航路点，因为它是动画的一部分，而徽标本身在滚动页面时始终保持固定在同一位置，您只需指定即可