jquery - 当用户向下滚动页面时，元素会出现和消失

Question

我使用这种代码：

$(document).ready(
  function DocumentLoad()
  {    
    $(window).scroll(scrollBtn);
    scrollBtn();      
  });

 function scrollBtn(){  
    if ( $(window).scrollTop() > 150 )
         $('.scroll-btn:hidden').fadeIn('slow');
       else
         $('.scroll-btn:visible').fadeOut('slow');         
 }  

和<div class="scroll-btn"> my content to show </div>

当用户向下滚动页面时显示一个元素。我想以 div scroll-btn 在页面结束之前保持 350px 高度时消失的方式扩展它（我的页脚有 350px 高度，所以我想在 div scroll-btn 到达它之前消失。

Answer 1

这应该为您解决问题：

pxFromBottom根据您的要求进行调整。

$(window).scroll(function() {
    var pxFromBottom = 350;
    if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) {
        $('.scroll-btn').fadeOut('slow');
    } else {
        $('.scroll-btn').fadeIn('slow')
    }
});

工作演示