滚动到页面底部时显示和隐藏页脚元素

Question

我有这样的结构：

如您所见，我在页面顶部有一个固定的nav-bar 和一个下拉侧边栏。然后我有一个带有content id 的<div> 元素。

在这个<div> 元素中，我有一些内容，最后，我有一个<div>，它的位置固定在页面底部。

我想要的是当用户向下滚动到页面底部时隐藏底部 div。

我已经尝试过了，但它并没有像我预期的那样工作：

    $('div#content').scroll(function () {
        var fixedBottom = $("#dialog-button-bar");
        if ($('div#content').height() <= ($(window).height() + $(window).scrollTop())) {
            fixedBottom.css("opacity", 0 );
        } else {
            fixedBottom.css("opacity", 1 );
        }
    });

我希望有人可以帮助我。 谢谢

Answer 1

这是一个棘手的问题，因为 scrollTop() 和 height() jQuery 方法在添加和删除 HTML 元素时会更改它们的返回值。

这样做的一种方法是定义一个布尔变量，该变量将有助于避免在添加页脚时更改文档高度。因此，通过这样做可以创建一个 if 语句，该语句将根据滚动位置更改 CSS 属性 display。

let footerVisible = false;
var docHeight = 0;

$(window).scroll(function() {
   var scrollPos = $(window).scrollTop() + $(window).height();
   if(footerVisible == false){docHeight = $(document).height()}
   
   if(scrollPos >= docHeight){
    footerVisible = true;
    $('.footer').css('display', 'block');
   }else if(scrollPos <= docHeight){
    footerVisible = false;
    $('.footer').css('display', 'none');
   }
});

*{width:100%;margin:0;padding:0;color:white;text-align:center}
.nav{
  background: #00A19D;
  height:60px;
}
.content{
  background: #FFF8E5;
  height:1500px;
}
.footer{
  background: #345B63;
  height:200px;
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class='nav'><br><h1>Nav</h1></section>
<section class='content'></section>
<section class='footer'><br><h1>Magical Footer</h1></section>

Answer 2

您不断地将 scollTop 添加到高度，这不会总是使 if 语句为真，因为高度+某个值总是大于 div 的高度。尝试将文档高度与 scrollTop 而不是 div 高度进行比较