Hide div when user reaches the bottom of page

Question

I want to hide a div element when user scrolls and reaches the bottom of the page and display it again when the user scrolls back up. For example consider the following navigation bar which is named "nav".

HTML

<div class="nav"></div>

CSS

.nav{
 width:100%;
 height:50px;
 position:fixed;
 }

I want to hide the nav div element when scroll reaches bottom of the webpage. How can I make this possible. Can I use CSS for this or should I use JavaScipt instead.

Answer 1

HTML

<div id="nav"></div> 

JS

document.onscroll = function() {
        if (window.innerHeight + window.scrollY > document.body.clientHeight) {
            document.getElementById('nav').style.display='none';
        }
    }

Fiddle: https://jsfiddle.net/k77fdzyu/1/

Answer 2

If you want the element to re-appear, include an else statement with display='block';:

document.onscroll = function() {
    if (window.innerHeight + window.scrollY > document.body.clientHeight) {
        document.getElementById('nav').style.display='none';
    }else{
        document.getElementById('nav').style.display='block';
    }
}