How to align Navbar at bottom of window, but have content under this in CSS?

Question

I need help with this website I'm making for a project at school. I need help with the Nav bar at the bottom of the window when you first load the page but if you scroll down it scrolls with the page. I need it to basically align to the bottom of the window when its first loaded. I can't for the life of me figure out how to do it. Here is a reference.

Example Website

Notice how the Nav bar is always at the bottom of the window when scrolled to the top even if you resize the window. I would like to do this with only CSS and HTML, but I understand a little bit of Javascript so if It can't be done with only CSS and HTML it's alright. Thanks for the help.

We are here to help you learn, not to make your homework. What have you done so far? — tao, Nov 26 '15 at 23:09
Possible duplicate of [How to create a sticky navigation bar that becomes fixed to the top after scrolling](http://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll) — Berendschot, Nov 26 '15 at 23:15

Berendschot · Accepted Answer · 2015-11-26T23:34:34.057

The magic is in using both JQuery and 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");
        }
    });
});

Whenever the .bottom-bar reaches the top of the window a class fixed-top is added.

CSS

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

Example

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

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;
}

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

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

How to align Navbar at bottom of window, but have content under this in CSS?

1 Answers1