用户滚动到页面底部时，向上滑动页脚-闪烁

Question

我有以下代码：

var footer = $('.footer'),
    extra = 0;

// footer.css({ opacity: '0', display: 'block' });


$(window).scroll(function() {

   var scrolledLength = ( $(window).height() + extra ) + $(window).scrollTop(),
       documentHeight = $(document).height();



    console.log( 'Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight )


   if( scrolledLength >= documentHeight ) {

       footer
          .addClass('bottom')
          // .slideUp();
          .stop().animate({ bottom: '0', opacity: '1' }, 300);

   }
   else if ( scrolledLength <= documentHeight && footer.hasClass('bottom') ) {
        footer
           .removeClass('bottom')
          //  .slideDown();
           .stop().animate({ bottom: '-100', opacity: '0' }, 300);

   }
});

我的目标是在用户滚动到页面底部时显示页脚。 如果用户再次向上滚动，我希望页脚再次向下滑动。

现在，我正在根据documentHeight检查scrolledLength 。 但是，问题似乎是一旦到达底部， documentHeight就会发生变化，因为页脚会出现并会扩展文档。

我的代码可以正常工作，页脚不会再消失或什么都没有消失，但是随着重新计算，它闪烁了很多（然后最终趋于平稳）。 我该如何解决？ 我的代码中有任何错误吗？

Answer 1

您已经在页脚中添加了一个类，可以使用CSS处理动画：

.footer {
  position: fixed;
  width: 100%;
  height: 100px;
  bottom: -100px;
  transition: all 200ms ease-out;
}

.footer.bottom {
  bottom: 0;
}

更新： JSFiddle与工作页脚向上滑动 。

显然，由于您未提供CSS，我正在猜测页脚应如何设置样式-添加类.bottom时，此代码将使页脚动画化。

Answer 2

尝试改用CSS过渡：

 var footer = $('.footer'), extra = 0; // footer.css({ opacity: '0', display: 'block' }); $(window).scroll(function() { var scrolledLength = ( $(window).height() + extra ) + $(window).scrollTop(), documentHeight = $(document).height(); if( scrolledLength >= documentHeight ) { footer .addClass('open') } else if ( scrolledLength <= documentHeight && footer.hasClass('open') ) { footer .removeClass('open') } }); 

 .container{ position:relative; height: 200vh; width:100%; background-color:red; overflow:hidden; } .footer{ height: 100px; width:100%; position: absolute; left:0px; bottom:-100px; background-color: black; transition: 1s; } .open{ bottom:0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="footer"></div> </div>