Javascript 固定底部div打开菜单

我试图在打开菜单时将DIV设置为屏幕底部的

class=“overlay bottom”

。然而，它甚至在菜单打开之前就出现了。我该怎么办

函数openNav（）{ document.getElementById（“myNav”）.style.width=“100%”； } 函数closeNav（）{ document.getElementById（“myNav”）.style.width=“0%”； }

.overlay{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
溢出x：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.overlay a:悬停，.overlay a:焦点{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.overlay a{font size:20px}
.overlay.closebtn{
字体大小：40px；
顶部：15px；
右：35px；
}
}
.覆盖底部{
位置：固定；
底部：0；
背景色：#e22727；
宽度：100%；
颜色：#fff；
}

底部
☰ 打开

这就是你要找的，对吗

函数openNav（）{ document.getElementById（“myNav”）.style.width=“100%”； document.getElementsByClassName（“覆盖底部”）[0].style.visibility=“可见”； } 函数closeNav（）{ document.getElementById（“myNav”）.style.width=“0%”； document.getElementsByClassName（“覆盖底部”）[0].style.visibility=“hidden”； }

.overlay{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
溢出x：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.a:悬停，
.a：聚焦{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.覆盖{
字号：20px
}
.overlay.closebtn{
字体大小：40px；
顶部：15px；
右：35px；
}
}
.覆盖底部{
位置：固定；
底部：0；
背景色：#e22727；
宽度：100%；
颜色：#fff；
可见性：隐藏；
}

底部
☰ 打开

使用

位置：绝对

而不是固定在

覆盖底部

？当用户滚动时，这将不起作用。