Search code examples
javascriptjqueryfadein

.fadeIn() not working properly

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.

Solution

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