如何在窗口底部对齐Navbar，但在CSS下有内容？

Question

我需要这个网站的帮助我在学校做项目。首次加载页面时，我需要窗口底部导航栏的帮助，但如果向下滚动，则会滚动页面。我需要它在第一次加载时基本上对齐窗口的底部。我不能为我的生活弄清楚如何去做。这是一个参考。

Example Website

注意即使调整窗口大小，当滚动到顶部时导航栏始终位于窗口底部。我想只使用CSS和HTML来做这件事，但我理解了一点Javascript，所以如果不能用CSS和HTML完成它就没问题。谢谢你的帮助。

Answer 1

神奇之处在于使用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-bar到达窗口顶部时，都会添加一个类fixed-top。

<强> CSS

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

示例

＆＃13;

＆＃13;

$(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");
        }
    });
});

＆＃13;

body {
    margin: 0px;
    font-family: Helvetica, Arial;
    height: 2000px;
}
.bottom-bar {
    width: 100%;
    height: 40px;
    background: #2A2A2A;
    color: white;
    text-align: center;
    line-height: 40px;
    margin-top: calc(100vh - 40px);
}
.fixed-top {
    position: fixed;
    margin-top: 0 !important;
}

＆＃13;

<nav class="bottom-bar">Navigation bar</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;