Question

这是我的div style

<style>
#N_fixedBottom
{
   position:fixed;
   bottom:0px;
   left:0px;
   right:0px;
   background-color:#004369;
   width:100%;
   height:20px;
   z-index:100;
}

</style>
<div id="N_fixedBottom">

</div>

当div向下滚动到页面底部时，它应隐藏。因为这个DIV隐藏了我的页脚。

Answer 1

假设正文的margin为0.否则，您需要将上边距和下边距添加到$('body').height()。

$(document).ready(function(){
   $(window).scroll(function() {
       if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
           $('#N_fixedBottom').hide();
       }
    });
});

Answer 2

猜猜你想要一个纯粹的javascript解决方案现在还没有包含标签jquery？

<div id="N_fixedBottom">bla bla</div>

脚本：

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

Answer 3

$(window).scroll(function() {
    var fixedBottom = $("#N_fixedBottom");
    if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
        fixedBottom.css("opacity", 0 );
    } else {
        fixedBottom.css("opacity", 1 );
    }
});

然后我会添加不透明度：0和过渡：不透明度0.5s缓出到#N_fixedBottom所以它淡入：

#N_fixedBottom {
   transition: opacity 0.5s ease-out;
   opacity: 0;
   position: fixed;
   bottom: 0px;
   left: 0px;
   right: 0px;
   background-color: #004369;
   width: 100%;
   height: 20px;
   z-index: 100;
}

如何通过CSS滚动到达底部时隐藏DIV？

3 个答案: