文章/答案/技术大牛

发布

社区首页 >问答首页 >当用户滚动到页面非常底部时，淡入/退出固定位置div。

问当用户滚动到页面非常底部时，淡入/退出固定位置div。
EN

Stack Overflow用户

提问于 2012-07-10 12:35:00

回答 1查看 12.9K关注 0票数 2

这似乎很基本，但我正在尝试获得一个固定位置的页脚div，当用户滚动到网页的最底部时，可以滑动和淡入，然后在用户滚动回滚时滑动和淡出。我搜索过堆栈溢出，其他人也提出了解决方案，但我的代码导致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;
}

谢谢你的帮助！

jquery-animate

jquery

html

scroll

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-07-10 13:09:40

我想我会尝试这样做的。

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

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

联署材料：

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;
}

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11413439

复制

相似问题

问当用户滚动到页面非常底部时，淡入/退出固定位置div。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当用户滚动到页面非常底部时，淡入/退出固定位置div。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当用户滚动到页面非常底部时，淡入/退出固定位置div。
EN