Fade in on automated scrolldown (a href="#")

Question

I have image button:

                <a href="#our-apps"><img src="assets/img/arrow-down.png" width="350"/></a>

It will use jquery to smooth scrolldown to div with id #our-apps.

I want to fade in div containter with id #our-apps when someone is scrolling or when click on image that will use smooth scrolling method to auto scroll down to #our-apps.

Here is code of div #our-apps:

            <div class="main" id="our-apps">

            <section>

                <h1>Our Apps</h1>

                <img src="assets/img/htc.png" align="centerleft" alt="HTC" />

                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                <img src="assets/img/htc.png" align="centerright" alt="HTC" />

            </section>

        </div>

Thanks.

Answer 1

One way of achieving that is to watch window scroll and check if your div is within visible area

$(window).on('scroll', function(){
  if($(this).scrollTop() + $(this).innerHeight() > $('#our-apps').offset().top){
    $('#our-apps').addClass('visible');
  }
});

scss

#our-apps{
  opacity: 0;
  transition: opacity .5s ease-in-out;
  &.visible{
    opacity: 1;
  }
}

Why I used opacity instead of jquery's hide/show is because i need to het div offset - and if it has "display: none" property, offset equals 0.

See it here: https://jsfiddle.net/auzxqx42/

Fade in on automated scrolldown (a href="#")

Sign up