Nikola Ivanović Nikola Ivanović - 10 months ago 52
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">
<h1>Our Apps</h1>
<img src="assets/img/htc.png" align="centerleft" alt="HTC" />
<img src="assets/img/htc.png" align="centerright" alt="HTC" />


Answer Source

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){


  opacity: 0;
  transition: opacity .5s ease-in-out;
    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: