当用户滚动到页面的最底部时淡入/淡出固定位置 div

Posted 2023-05-08

【中文标题】当用户滚动到页面的最底部时淡入/淡出固定位置 div

【英文标题】：Fade in/out fixed position div when user scrolls to very bottom of page

【发布时间】：2012-07-09 22:29:07

【问题描述】：

这看起来很简单，但我试图让一个固定位置的页脚 div 在用户滚动到网页的最底部时滑动和淡入，然后在用户向上滚动时滑动和淡出。我搜索了 Stack Overflow，其他人提出了解决方案，但我的代码导致我的 div 只能滑动和淡入。当用户向上滚动时，我无法让 div 滑动和淡出。

此外，这个 div 在我开始滚动后会立即滑动和淡入。我需要它等到它到达页面底部（或我可以放置在页面底部的不可见 div），然后我的固定位置 div 滑动并淡入。

有什么建议吗？

jQuery：

$(function() 
    $('#footer').css(opacity: 0, bottom: '-100px');
    $(window).scroll(function() 
        if( $(window).scrollTop + $(window).height() > $(document).height() ) 
            $('#footer').animate(opacity: 1, bottom: '0px');
        
    );
);

HTML：

<div id="footer">
    <!-- footer content here -->
</div>

CSS：

#footer 
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    z-index: 26;

感谢您的帮助！

【参考方案1】：

我想我会尝试这样做。

http://jsfiddle.net/lollero/SFPpf/3

http://jsfiddle.net/lollero/SFPpf/4 - 更高级的版本。

JS：

var footer = $('#footer'),
    extra = 10; // In case you want to trigger it a bit sooner than exactly at the bottom.

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')
          .stop().animate( bottom: '0', opacity: '1' , 300);

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

   
);

html：

<div id="footer">
    <p>Lorem ipsum dolor sit amet</p>
</div> 

CSS：

#footer 
    display: none;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: -100px;
    height: 100px;
    width: 100%;
    background: #222;
    color: #fff;
    text-align: center;


#footer p 
    padding: 10px;

【讨论】：

非常感谢您的帮助！您的解决方案肯定有效，但是，有没有办法让这个固定位置的 div 也随着淡入而滑入和滑出？

@kaffolder 当然。 jsfiddle.net/lollero/SFPpf/3 - 顺便说一句，添加了 console.log() 以显示当前滚动长度和文档长度（滚动时更新）。这只是为了测试。

哇！！谢谢，谢谢，谢谢@Joonas！所以非常很有帮助！它完美地工作。关于此解决方案确实有另一个快速问题。假设我有一个包含在此页脚中的 3 个 <li> 元素的无序列表。是否可以单独为它们设置动画，或者不是因为我们只调用$('#footer')？现在，它们都同时出现并滑入。当它们滑出/淡出时也是如此。我几乎想创造更多的“爆米花”效果，每个<li> 在不同的时间进入并在不同的时间离开。这很难做到吗？

@kaffolder 最简单的方法是分别定位每个元素并手动给它们不同的值，但这里有一些可能有用的东西jsfiddle.net/lollero/SFPpf/4

非常感谢！这简直太完美了。正如我所希望的那样，我已经对其进行了调整以与我的无序菜单列表一起使用。可能会尝试弄乱您所写的内容以使框更快地进入...不知道为什么在页脚滑入和 div 框滑入之间会有轻微的延迟，但我希望尽量减少不知何故，两者之间的延迟。再次感谢您提供出色的解决方案并帮助我！