.fadeIn（）无法正常工作

Question

I'm trying to have a quote that fades in when you scroll all the way the bottom to the page. I have this little bit of inline jquery (it's so little I can't really justify making a new file), but it doesn't seem to work. The quote keeps an opacity of 0:

$(document).ready(function(){
    if($(document).height()-$(window).height() < $(document).scrollTop() + 20) {
      $('#quote').fadeIn('fast',1);
    }

    else {
    }
    });

when I remove the if/else statement, the fadeIn still doesn't work, so that's why I'm confident saying that the issue lies with something else

Thanks so much,

also, heads up, I'm a total jQuery and js noob.

Answer 1

Another thing is, that you actually don't listen to your website events, as scroll , so code is executed when page is rendered and even if you scroll to the bottom, nothing happens.

You can add event listener

$('window').scroll(function() {
  if($(document).height()-$(window).height() < $(document).scrollTop() + 20) {
    $('#quote').fadeIn('fast');
  }
});