当用户到达页面底部时隐藏div

Question

我想在用户滚动并到达页面底部时隐藏div元素，并在用户向上滚动时再次显示它。例如，考虑以下名为“ nav”的导航栏。

的HTML

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

的CSS

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

nav当滚动到达网页底部时，我想隐藏div元素。我怎样才能做到这一点。我可以为此使用CSS还是应该使用JavaScipt。

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

小提琴：https : //jsfiddle.net/k77fdzyu/1/

Answer 2

如果您希望该元素重新出现，请包含一个带有以下内容的 else 语句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';
    }
}