Jquery 用圆连接灰线

这是代码，当灰线向左移动时，我需要将它们与圆连接起来→ 正确的。有没有办法计算距离，这样我就可以把灰线和圆连接起来

$（窗口）。滚动（函数（）{
st=$（window.scrollTop（）；
///////////////////////////圆形动画////////////////////////////
var circleOne=$（“#步骤1”）.offset（）.top；
如果（st>circleOne-400）{
$（“#步骤1”）.find（“.box circle”）.addClass（“moveMe”）；
$（“#步骤1”）.addClass（“步骤移动”）；
}
var circleTwo=$（“#步骤2”）.offset（）.top；
如果（st>circleTwo-300）{
$（“#step2”）.find（“.box circle”）.addClass（“moveMeRight”）；
$（“#step2”）.addClass（“step-moving2”）；
}
var circleThree=$（“#步骤3”）.offset（）.top；
如果（st>circleThree-300）{
$（“#步骤3”）.find（“.box circle”）.addClass（“moveMeLeft”）；
$（“#step3”）.addClass（“step-moving3”）；
}
var circleThree=$（“#步骤4”）.offset（）.top；
如果（st>circleThree-300）{
$（“#步骤4”）.find（“.box circle”）.addClass（“moveMeRight1”）；
$（“#step4”）.addClass（“step-moving4”）；
}
});
#我们如何工作{
溢出：隐藏；
}
.工作负责人{
填充：80px0；
}
.工作负责人：之后{
显示：块；
内容：“；
明确：两者皆有；
}
.步骤{
利润率：0.120px；
}
.步骤：之后{
显示：块；
内容：“；
明确：两者皆有；
}
.盒子圈：在{
位置：绝对位置；
宽度：5px；
高度：120px；
背景#d3d6d9；
内容：“；
底部：-120px；
左：50%；
}
.box-circle.box-circle01:after{
显示：无；
}
.盒子圈{
宽度：200px；
高度：200px；
背景:#2f303a；
位置：相对位置；
左：300px；
边界半径：100%；
填充：20px 20px 0；
浮动：左；
}
.box-circle.moveMe{
左：100px；
-webkit转换：所有1；
-moz转换：所有1；
-ms转换：所有1s；
-o-过渡：所有1s；
过渡：所有1；
背景：#00b7e9；
}
.盒子圆圈.移动我：之后{
ms变换：旋转（-45度）；
/*IE 9*/
-webkit变换：旋转（-45度）；
/*铬、狩猎、歌剧*/
变换：旋转（-45度）；
左：96%；
底部：-164px；
高度：195px；
-webkit过渡：全部1.3；
-moz转换：全部1.3秒；
-ms转换：全部1.3s；
-o-过渡：均为1.3s；
过渡：全部1.3秒；
}
.步骤编号{
浮动：左；
字体大小：76px；
颜色：#fff；
字号：700；
}
.步骤图标{
浮动：对；
宽度：60px；
高度：60px；
利润率：30px 30px 0；
}
.打电话{
背景：url（“../images/ico call.svg”）不重复；
背景大小：100%100%；
}
.开始{
背景：url（“../images/ico-get-s.svg”）不重复；
背景大小：100%100%；
}
.项目{
背景：url（“../images/ico project.svg”）不重复；
背景大小：100%100%；
}
.项目完成{
背景：url（“../images/ico done.svg”）不重复；
背景大小：100%100%；
}
第二步{
字体大小：14px；
颜色：#fff；
}
A.持票人{
浮动：左；
位置：相对位置；
左：350px；
最大宽度：390px；
文本对齐：居中；
}
.box-circle.moveMe.步骤编号{
边际：0-80px；
-webkit转换：所有1；
-moz转换：所有1；
-ms转换：所有1s；
-o-过渡：所有1s；
颜色：#00b7e9；
字体大小：130px；
位置：相对位置；
顶部：15px；
}
.box-circle.moveMe.step图标{
利润率：0-94px0；
-webkit转换：所有1；
-moz转换：所有1；
-ms转换：所有1s；
-o-过渡：所有1s；
宽度：80px；
高度：80px；
顶部：-24px；
位置：相对位置；
}
.box-circle.moveMe.detail{
文本对齐：居中；
顶部：-141px；
}
.box-circle.moveMe.step-icon.call{
背景：url（“../images/ico call hover.svg”）不重复；
背景大小：100%100%；
}
.台阶移动.对位支架.对位台阶{
-webkit转换：1s全部；
-moz转换：1s全部；
-ms转换：1s全部；
-o-过渡：1s-all；
过渡：1s全部；
颜色：#233341；
}
.圆圈顶部：之后{
显示：块；
明确：两者皆有；
内容：“；
}
.细节{
溢出：隐藏；
颜色：#fff；
位置：相对位置；
顶部：-20px；
填充：0 10px；
字体大小：20px；
}
.详细跨度{
显示：块；
}
.细节强{
字号:900 ;；
}
.box-circle.moveMeRight{
左：700px；
-webkit转换：1.3s全部；
-moz转换：1.3s全部；
-ms转换：1.3s全部；
-o-过渡：1.3s全部；
背景：#00b7e9；
}
.box-circle.moveMeRight.步骤编号{
利润率：0-95像素；
-webkit过渡：全部1.3；
-moz转换：全部1.3秒；
-ms转换：全部1.3s；
-o-过渡：均为1.3s；
颜色：#00b7e9；
字体大小：130px；
位置：相对位置；
顶部：25px；
}
.box-circle.moveMeRight.step图标{
利润率：0-104px0；
-webkit转换：所有1；
-moz转换：所有1；
-ms转换：所有1s；
-o-过渡：所有1s；
宽度：80px；
高度：80px；
位置：相对位置；
顶部：-34px；
}
.box-circle.moveMeRight.已启动{
背景：url（“../images/ico-get-s-hover.svg”）不重复；
背景大小：100%100%；
}
.box-circle.moveMeRight.详图{
文本对齐：居中；
顶部：-130像素；
}
.步进运动2.对位支架{
左：0；
顶部：50px；
}
.步进移动2.对位支架.对位步进{
颜色：#233341；
-webkit过渡：全部1.3；
-moz转换：全部1.3秒；
-ms转换：全部1.3s；
-o-过渡：均为1.3s；
}
.box-circle.moveMeLeft{
左：100px；
-webkit转换：所有1；
-moz转换：所有1；
-ms转换：所有1s；
-o-过渡：所有1s；
过渡：所有1；
背景：#00b7e9；
}
.box-circle.moveMeLeft.详图{
文本对齐：居中；
顶部：-141px；
}
.box-circle.moveMeLeft.step-icon.project{
背景：url（“../images/ico project hover.svg”）不重复；
背景大小：100%100%；
}
.step-MOVING 3.para支架。para步骤{
-webkit转换：1s全部；
-moz转换：1s全部；
-ms转换：1s全部；
-o-过渡：1s-all；
过渡：1s全部；
颜色：#233341；
}
.box-circle.moveMeLeft.step图标{
利润率：0-100px0；
-webkit转换：所有1；
-moz转换：所有1；
-ms转换：所有1s；
-奥特拉