Javascript 在尝试复制某个CSS转换时卡住了（CTA按钮，向下滚动时会移动到页面的下角并得到修复）

下面是我创建的一个简单的提琴（），向您展示我试图复制的动画（从这个网站：）

我对Javascript/Jquery还是相当陌生的，只做了几个月的HTML和CSS

关于我的动画的问题是（据我所知）没有从绝对位置到固定位置的转换，我相信这会在触发动画（或者转换，如果你愿意的话）之后引起小的跳跃。第二个问题是：：before元素的内容也不能转换。如何使用jQuery修复这些问题

我试图通过使用CSS来让它工作，但我不断遇到新的问题。我想使用JavaScript是不可避免的，这正是我需要帮助的地方。我真的很感激

注意：不是以英语为母语的人

HTML

CSS

部分{
高度：2000px；
宽度：自动；
}
.按钮{
位置：绝对位置；
转化：translateX（50%）；
右：50%；
显示：内联块；
颜色：白色；
线高：60px；
高度：60px；
宽度：自动；
左侧填充：25px；
右边填充：25px；
背景颜色：蓝色；
边界半径：25px；
垂直对齐：中间对齐；
顶部：15雷姆；
}
.按钮：：之前{
内容：“按钮文本”；
}
.漂浮{
左侧填充：0px；
右边填充：0px；
位置：固定；
右：15px；
顶部：计算（100vh-120px）；
转化：无；
高度：80px；
宽度：80px；
过渡：所有1.5s的轻松进出；
背景色：红色！重要；
边界：无；
边界半径：50%；
证明内容：中心；
文本对齐：居中；
}
.浮动：：之前{
内容：url（“数据：image/svg+xml；utf8，”）；
}

JS

$（文档）.ready（函数（）{
$（窗口）.on（'scroll'，function（）{
if（$（window）.width（）问题中突出显示了两个问题：当转换在绝对和固定之间移动时的“跳跃”，以及伪元素的内容无法转换的事实

为了解决绝对跳转到固定跳转的问题，我们可以在过渡开始后将按钮设置为固定，然后再进行过渡。这可以通过引入CSS动画而不是过渡来实现

为了显示内容之间的转换，我们使用before伪元素来保存初始文本（如给定的代码中所示），并引入一个befort伪元素来保存svg

注意：在要模拟的网站中，按钮最初在页面的白色背景上有一个白色背景。这意味着随着初始按钮逐渐消失，形状的变化不太明显。使用对比鲜明的蓝色背景，形状的变化更加明显。这可能是所需的效果，也可能不是所需的效果

下面是一个片段，其中包含动画，而不是过渡，并在动画开始时立即移动到固定位置


$（文档）.ready（函数（）{
$（窗口）.on（'scroll'，function（）{
if（$（窗口）.width（）=滚动顶部）{
}
});
}
});
})；
部分{
高度：2000px；
宽度：自动；
位置：相对位置；
}
.button、.button:：之前、.button:：之后{
动画持续时间：1.5s；
动画迭代次数：1；
动画填充模式：正向；
动画计时功能：轻松进出；
位置：绝对位置；
}
.按钮{
转化：translateX（50%）；
右：50%；
线高：60px；
高度：60px；
宽度：自动；
颜色：透明；/*执行此操作以确保按钮具有尺寸，以便可以单击*/
显示：内联块；
垂直对齐：中间对齐；
顶部：15雷姆；
}
.按钮.浮动{
位置：固定；
顶部：30px；
动画名称：浮动；
}
.按钮：：之前{
内容：“按钮\00a0文本”；
不透明度：1；
颜色：白色；
线高：60px；
高度：60px；
宽度：自动；
左侧填充：25px；
右边填充：25px；
背景颜色：蓝色；
边界半径：25px；
}
.按钮：：之后{
内容：url（“数据：image/svg+xml；utf8，”）；
不透明度：0；
左侧填充：0px；
右边填充：0px；
高度：80px；
宽度：80px；
左边缘：-50%；
背景色：红色；
边界：无；
边界半径：50%；
证明内容：中心；
文本对齐：居中；
}
div.button.floating:：before{
动画名称：淡出；
}
div.button.floating:：after{
动画名称：fadein；
}
@关键帧淡出{
100% {
不透明度：0；
}
}
@关键帧淡入淡出{
100% {
不透明度：1；
}
}
@关键帧向下浮动{
100% {
顶部：计算（100vh-120px）；
右：95px；/*80+15px*/
}
}

按钮文本
问题中突出了两个问题：当转换在绝对和固定之间移动时的“跳跃”，以及伪元素的内容无法转换的事实

为了解决绝对跳转到固定跳转的问题，我们可以在过渡开始后将按钮设置为固定，然后再进行过渡。这可以通过引入CSS动画而不是过渡来实现

为了显示内容之间的转换，我们使用before伪元素来保存初始文本（如给定的代码中所示），并引入一个befort伪元素来保存svg

注意：在要模拟的网站中，按钮最初在页面的白色背景上有一个白色背景。这意味着随着初始按钮逐渐消失，形状的变化不太明显。使用对比鲜明的蓝色背景，形状的变化更加明显。这可能是所需的效果，也可能不是所需的效果

下面是一个片段，其中包含动画，而不是过渡，并在动画开始时立即移动到固定位置


$（文档）.ready（函数（）{
$（窗口）.on（'