Html GSAP/CSS导航栏动画大小调整

我试图改变原来的GSAP代码，使蓝色导航条只填充绿色的包装2，而不是整个屏幕

是否有一种方法可以在getVpdr函数中仅动态计算#wrapper2大小，以便

scale:getVpdr（）

值将仅填充此div的维度

const getVpdr = () => {
  const vph = Math.pow(html.offsetHeight, 2); // Height
  const vpw = Math.pow(html.offsetWidth, 2); // Width
  const vpd = Math.sqrt(vph + vpw); // Diagonal
  return (vpd * 2) / circleWidth; // Circle radius
};

console.clear（）；
const html=document.documentElement；
const toggle=document.getElementById（“toggle”）；
const circle=document.getElementById（“bg circle”）；
const circleWidth=circle.clientWidth；
//得到高度、宽度、对角线和圆半径的数学计算
常量getVpdr=（）=>{
const vph=Math.pow（html.offsetHeight，2）；//高度
const vpw=Math.pow（html.offsetWidth，2）；//宽度
常量vpd=Math.sqrt（vph+vpw）；//对角线
返回值（vpd*2）/circleWidth；//圆半径
};
常量openNavbar=（）=>{
const openTimeline=new TimelineMax（）；
openTimeline.to（“.navbar”，0，{display:“flex”}）；
openTimeline.to（“#bg圈”，1.5，{scale:getVpdr（），ease:Expo.easeInOut}）；
openTimeline.staggefromto（“.navbar ul li”，0.5，{y:25，不透明度：0}，{y:0，不透明度：1}，0.1,1）；
};
const closeNavbar=（）=>{
const closeTimeline=新的TimelineMax（）；
closeTimeline.staggefromto（“.navbar ul li”，0.5，{y:0，不透明度：1，延迟：0.5}，{y:25，不透明度：0}，-0.1）；
关闭时间线到（“#bg圈”，1，{比例：0，轻松：Expo.easeInOut，延迟：-0.5}）；
closeTimeline.to（“.navbar”，0，{display:“none”}）；
};
设isOpen=false；
toggle.onclick=函数（）{
if（等参线）{
此.classList.remove（“活动”）；
closeNavbar（）；
}否则{
this.classList.add（“活动”）；
openNavbar（）；
}
等参=！等参；
};
//在windows上调整大小，重新调整圆半径并更新
window.onresize=（）=>{
if（等参线）{
gsap.to（“#bg圈”，1，{scale:getVpdr（），ease:Expo.easeInOut}）；
}
};
正文{
对齐项目：居中；
显示器：flex；
身高：100%；
证明内容：中心；
保证金：0；
溢出：隐藏；
宽度：100%；
字体系列：无衬线；
背景：白色；
}
车身包装1，车身包装2{
宽度：50vw；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
车身#包装1{
背景色：红色；
}
车身#包装2{
背景颜色：绿色；
}
.导航栏切换{
-webkit点击突出显示颜色：透明；
转换：转换400ms；
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
光标：指针；
位置：固定；
z指数：20；
顶部：1rem；
右：1rem；
背景：透明；
边界：无；
大纲：无；
填充：0；
}
.navbar切换.line{
填充：无；
转换延迟：400ms，0；
转换属性：笔划、笔划dasharray、笔划dashoffset；
过渡时间功能：轻松；
过渡时间：400ms；
行程：#000；
笔画宽度：5.5；
笔划线头：圆形；
}
.navbar切换.line.top{
行程：40139；
}
.navbar切换.line.bottom{
行程：20 180；
行程偏移：-20px；
}
.navbar-toggle.active{
变换：旋转（45度）；
}
.navbar-toggle.active.line{
冲程：#FFFFFF；
}
.navbar-toggle.active.line.top{
行程偏移：-98px；
}
.navbar-toggle.active.line.bottom{
行程偏移：-138px；
}
.navbar切换：未（.active）：悬停.line.bottom{
行程：40 180；
行程偏移：0px；
}
navbar先生{
位置：固定；
宽度：100%；
身高：100%；
z指数：2；
显示：无；
对齐项目：居中；
证明内容：中心；
}
纳瓦尔先生{
宽度：100%；
最大宽度：400px；
列表样式：无；
填充：0；
保证金：0；
}
navbar ul li先生{
不透明度：0；
}
navbar ul li a.先生{
颜色：白色；
文字装饰：无；
字体大小：25px；
显示：块；
文本对齐：左对齐；
填充：20px0；
字体大小：粗体；
字母间距：2px；
文本转换：大写；
光标：指针；
过渡时间：均为500ms；
位置：相对位置；
}
a:以前{
内容：attr（数据文本）；
位置：绝对位置；
左：0；
最高：50%；
转换：翻译（-50%，-50%）；
字体大小：70px；
不透明度：0；
过渡：不透明度降低500ms；
}
navbar ul li a:悬停{
字母间距：3px；
}
.navbar ul li a:悬停：之前{
不透明度：0.2；
}
#bg圈{
变换：比例（0）；
宽度：80px；
高度：80px；
背景：#4E6EE2；
位置：固定；
顶部：1rem；
右：1rem；
边界半径：50%；
z指数：1；
}

菜单不包括此红色div






菜单仅包含此绿色分区的内容
我想这可能就是你想要的：


console.clear（）；
const html=document.documentElement；
const toggle=document.getElementById（“toggle”）；
const circle=document.getElementById（“bg circle”）；
const circleWidth=circle.clientWidth；
//得到高度、宽度、对角线和圆半径的数学计算
常量getVpdr=（）=>{
const vph=Math.pow（html.offsetHeight，2）；//高度
const vpw=Math.pow（document.getElementById（“wrapper2”）.offsetWidth，2）；//宽度
常量vpd=Math.sqrt（vph+vpw）；//对角线
返回值（vpd*2）/circleWidth；//圆半径
};
常量openNavbar=（）=>{
const openTimeline=new TimelineMax（）；
openTimeline.to（“.navbar”，0{
显示：“flex”
});
openTimeline.to（“#背景圆圈”），1.5{
缩放：getVpdr（），
ease:Expo.easeInOut
});
openTimeline.Staggefromto（“.navbar ul li”），0.5{
y:25，
不透明度：0
}, {
y:0，
不透明度：1
}, 0.1, 1);
};
const closeNavbar=（）=>{
const closeTimeline=新的TimelineMax（）；
关闭时间线。从0.5到（“.navbar ul li”），0.5{
y:0，
不透明度：1，
延迟：0.5
}, {
y:25，
不透明度：0
}, -0.1);
关闭时间线。至（#背景圆圈），1{
比例：0，
ease:Expo.easeInOut，
延迟：-0.5
});
closeTimeline.to（“.navbar”，0{
显示：“无”
});
};
设isOpen=false