Question

I use this kind of code:

$(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');         
 }  

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

which shows an element when user scroll down the page. I would like to extend it in a way that div scroll-btn disapear when 350px of height remains before end of the page (my footer has 350px height, so I want to dissapear the div scroll-btn before it reach it.

Answer 1

This should do the trick for you:

Adjust pxFromBottom according to your requirement.

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

Working DEMO