当用户到达页面底部时隐藏div [英] Hide div when user reaches the bottom of page

问题描述

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

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

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

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.

推荐答案

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/

这篇关于当用户到达页面底部时隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！