Nikola Ivanović Nikola Ivanović - 1 month ago 11
CSS Question

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



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

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/