Javascript 将ul（无序列表）保持在固定位置

我已经离开了菜单，这是一个ul，我希望它在屏幕上是静态的。当我滚动时，应始终显示完整菜单。我有什么办法可以应付吗

我试图设置“位置：固定；顶部：0，左侧：0'，但它将ul旁边的div移动到ul的顶部

<div>
<!-- Sidebar -->
<ul class='anvbar-nav'>
    <!-- ...some other stuff-->
</ul>

<!-- Content Wrapper -->
<div class='content'>
    <!-- ...some other stuff-->
</div>

---

我想让ul在左上方的固定位置。但当我在ul中添加“position:fixed”时，内容位于ul顶部的div发生了变化。如何解决此问题。我想让content div占据屏幕上剩余的空间，而不是在左侧菜单（ul）的顶部，我想这会对您有所帮助

正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
身高：100%；
宽度：160px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
填充顶部：20px；
}
.侧导航a{
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
}
.侧导航a:悬停{
颜色：#f1f1；
}
梅因先生{
左边距：160px；/*与sidenav的宽度相同*/
字体大小：28px；/*增加文本以启用滚动*/
填充：0px 10px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

边栏
此侧边栏为全高（100%），始终显示

向下滚动页面以查看结果

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

我想这会对你有所帮助

正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
身高：100%；
宽度：160px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
填充顶部：20px；
}
.侧导航a{
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
}
.侧导航a:悬停{
颜色：#f1f1；
}
梅因先生{
左边距：160px；/*与sidenav的宽度相同*/
字体大小：28px；/*增加文本以启用滚动*/
填充：0px 10px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

边栏
此侧边栏为全高（100%），始终显示

向下滚动页面以查看结果

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

指定左侧导航宽度，并为内容div指定与左侧边距相同的值。 请参阅代码片段

：根{--leftnavwidth:250px；}
保险商实验室{
保证金：0；
填充：0；
列表样式：无；
}
李{
填充：10px 20px；
}
.anvbar导航{
位置：固定；
左：0；
排名：0；
宽度：var（--leftnavwidth）；
背景：564897；
颜色：#fff；
身高：100%；
}
.内容{
左边距：var（--leftnavwidth）；
}

菜单
菜单项2
菜单项3
菜单项4
菜单项5
菜单项6
菜单项7

内容包装
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作


两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，还必须为动物的劳动负责

指定左侧导航宽度