当用户滚动到页面的最底部时，淡入/淡出固定位置div [英] Fade in/out fixed position div when user scrolls to very bottom of page

问题描述

这看起来很基本，但我试图获得一个固定位置的页脚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> 
 <！ - 页脚内容在这里 - > 
< / div> 
  

CSS：

  #footer {
 position：fixed; 
 bottom：0; 
宽度：100％; 
 height：100px; 
 z-index：26; 
 
  

感谢您的帮助！

解决方案

我想我会尝试这样做。

$ b

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

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

JS：

  var footer = $（'＃footer'），
 extra = 10; //如果你想稍微触发它，而不是在底部。 
 
 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）
 
 $ b 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; 
位置：固定; 
 left：0px; 
 right：0px; 
 bottom：-100px; 
 height：100px; 
宽度：100％; 
背景：＃222; 
颜色：#fff; 
 text-align：center; 
} 
 
 #footer p {
 padding：10px; 
} 
  

This seems pretty elementary, but I am trying to get a fixed-position footer div to slide & fade in when a user scrolls to the very bottom of a webpage and then slide & fade out when the user scrolls back up. I have searched Stack Overflow and others have suggested solutions, but my code causes my div to only to slide & fade in. I can't get the div to slide & fade out when the user scrolls back up.

Also, this div slides & fades in right after I begin scrolling. I need it to wait until it gets to the bottom of the page (or an invisible div that I could place at the bottom of the page) before my fixed position div slides & fades in.

Any suggestions?

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

Thanks for helping!

解决方案

I think I would try doing it something like this.

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

http://jsfiddle.net/lollero/SFPpf/4 - Little more advanced version.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！