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

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

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

Answer 2

这是一个棘手的问题，因为 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>

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

Show and hide the footer element when scrolling to the bottom of the page

html

javascript

css

jquery

scroll