Javascript 粘性菜单/导航，菜单固定时，框阴影不工作

我的当前菜单/导航有一个问题，即当菜单被修复时，框阴影消失（与边框相同）。但当菜单不再固定时，它会回来。除此之外，菜单按预期工作

const nav=document.querySelector（“导航”）；
const navTop=nav.offsetTop；
window.addEventListener（“滚动”，粘滞导航）；
函数stickyNavigation（）{
如果（window.scrollY>=navTop）{
资产净值类别列表添加（“固定资产净值”）；
log（“sticky！！”）；
}否则{
资产类别列表删除（“固定资产净值”）；
}
}

nav{
显示器：flex；
调整项目：灵活启动；
柔性包装：nowrap；
身高：100%；
宽度：100vw；
/*边框底部：3px实心#f341cc*/
盒影：0px 3px#f341cc；
}
导航a{
填充：30px；
背景色：黑色；
文字装饰：无；
颜色：#f341cc；
字号：2em；
字体系列：“瓦雷拉圆形”，无衬线；
文本对齐：居中；
宽度：40%；
柔性生长：1；
文字装饰：无；
}
/*----粘性菜单--*/
.固定导航{
位置：固定；
排名：0；
/*盒影：0px 3px#f341cc*/
z指数：1；
}
身体{
高度：200vh；
}

---

从

导航中移除
高度：100%
。当元素变得固定时，它可能使用主体作为位置父对象，而高度：100%

成为整个屏幕，从而将阴影和边框推出屏幕

例如：

const nav=document.querySelector（“导航”）；
const navTop=nav.offsetTop；
window.addEventListener（“滚动”，粘滞导航）；
函数stickyNavigation（）{
如果（window.scrollY>=navTop）{
资产净值类别列表添加（“固定资产净值”）；
log（“sticky！！”）；
}否则{
资产类别列表删除（“固定资产净值”）；
}
}

nav{
显示器：flex；
调整项目：灵活启动；
柔性包装：nowrap；
/*移除高度：100%*/
宽度：100vw；
/*边框底部：3px实心#f341cc*/
盒影：0px 3px#f341cc；
}
导航a{
填充：30px；
背景色：黑色；
文字装饰：无；
颜色：#f341cc；
字号：2em；
字体系列：“瓦雷拉圆形”，无衬线；
文本对齐：居中；
宽度：40%；
柔性生长：1；
文字装饰：无；
}
/*----粘性菜单--*/
.固定导航{
位置：固定；
排名：0；
/*盒影：0px 3px#f341cc*/
z指数：1；
}
身体{
高度：200vh；
}

---

从

导航中移除
高度：100%
。当元素变得固定时，它可能使用主体作为位置父对象，而高度：100%

成为整个屏幕，从而将阴影和边框推出屏幕

例如：

const nav=document.querySelector（“导航”）；
const navTop=nav.offsetTop；
window.addEventListener（“滚动”，粘滞导航）；
函数stickyNavigation（）{
如果（window.scrollY>=navTop）{
资产净值类别列表添加（“固定资产净值”）；
log（“sticky！！”）；
}否则{
资产类别列表删除（“固定资产净值”）；
}
}

nav{
显示器：flex；
调整项目：灵活启动；
柔性包装：nowrap；
/*移除高度：100%*/
宽度：100vw；
/*边框底部：3px实心#f341cc*/
盒影：0px 3px#f341cc；
}
导航a{
填充：30px；
背景色：黑色；
文字装饰：无；
颜色：#f341cc；
字号：2em；
字体系列：“瓦雷拉圆形”，无衬线；
文本对齐：居中；
宽度：40%；
柔性生长：1；
文字装饰：无；
}
/*----粘性菜单--*/
.固定导航{
位置：固定；
排名：0；
/*盒影：0px 3px#f341cc*/
z指数：1；
}
身体{
高度：200vh；
}

---

从此处100%移除高度

nav {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    /* height: 100%; // Delete this */
    width: 100vw;
    /* border-bottom: 3px solid #f341cc; */
    box-shadow: 0px 3px #f341cc;
}

---

从此处移除高度100%

nav {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    /* height: 100%; // Delete this */
    width: 100vw;
    /* border-bottom: 3px solid #f341cc; */
    box-shadow: 0px 3px #f341cc;
}