Html 如何对齐窗口底部的导航栏，但在CSS中有其下的内容？

我需要这个网站的帮助，我正在学校做一个项目。我需要帮助导航栏在窗口底部当你第一次加载页面，但如果你向下滚动它与页面滚动。我需要它在第一次加载时基本上与窗口底部对齐。我一辈子都不知道该怎么做。这里有一个参考资料

---

请注意，即使调整窗口大小，当滚动到顶部时，导航栏始终位于窗口底部。我只想用CSS和HTML来做这件事，但我懂一点Javascript，所以如果不能只用CSS和HTML来做，那也没关系。谢谢你的帮助。

魔力在于同时使用JQuery和CSS

JQuery

$(document).ready(function () {
    var navBarY = $(".bottom-bar").offset().top;
    $(document).scroll(function () {
        if ($(window).scrollTop() >= navBarY) {
            $(".bottom-bar").addClass("fixed-top");
        } else {
            $(".bottom-bar").removeClass("fixed-top");
        }
    });
});

每当

.bottom条

到达窗口顶部时，就会添加一个类

固定顶部

CSS

.fixed-top {
    position: fixed;
    margin-top: 0 !important;
}

示例

$（文档）.ready（函数（）{
var navBarY=$（“.bottombar”）.offset（）.top；
$（文档）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>=navBarY）{
$（“.bottombar”）.addClass（“固定顶部”）；
}否则{
$（“.bottombar”）.removeClass（“固定顶部”）；
}
});
});
正文{
边际：0px；
字体系列：Helvetica，Arial；
高度：2000px；
}
.底杆{
宽度：100%；
高度：40px；
背景：#2a2a；
颜色：白色；
文本对齐：居中；
线高：40px；
利润上限：计算（100vh-40px）；
}
.固定顶{
位置：固定；
页边距顶部：0！重要；
}
导航栏
我们在这里帮助您学习，而不是做家庭作业。到目前为止你做了些什么？可能是重复的感谢这帮了大忙。